ReferenceError: Erforderlich nicht definiert, wenn versucht wird, jquery in angular2 zu verwenden

Question

Ich kann jQuery mit angular2 nicht verwenden. Wo ein Freund von mir es funktionierte (auf Mac) ist es nicht auf meinem Windows-Rechner.

Die Fehler:

jquery-ui.js:1 Uncaught ReferenceError: require is not defined 
angular2.dev.js:23935 EXCEPTION: TypeError: jQuery(...).find(...).sortable is not a function in [null] 
angular2.dev.js:23925 EXCEPTION: TypeError: jQuery(...).find(...).sortable is not a function in [null]BrowserDomAdapter.logError @ angular2.dev.js:23925 
angular2.dev.js:23925 ORIGINAL EXCEPTION: TypeError: jQuery(...).find(...).sortable is not a functionBrowserDomAdapter.logError @ angular2.dev.js:23925 
angular2.dev.js:23925 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23925 
angular2.dev.js:23925 TypeError: jQuery(...).find(...).sortable is not a function at EditPresentationComponent.ngOnInit 

Das Stück Code, wo wir jquery verwenden.

import { Component, OnInit, ElementRef, Inject } from 'angular2/core'; 

declare var jQuery: any; 

    @Component({ 
     selector: 'edit-presentation', 
     templateUrl: 'app/Edit Presentation/edit_presentation.component.html' 
    }) 

export class EditPresentationComponent implements OnInit { 
    elementRef: ElementRef; 

    isMyPresentationEmpty = true; 

    constructor(@Inject(ElementRef) elementRef: ElementRef) { 
     this.elementRef = elementRef; 
    } 

    ngOnInit() { 
     var self = this; 

     // Initialize Sortable on lists 
     var oldList, newList, item, oldIndex; 
     jQuery(this.elementRef.nativeElement).find('.slide-categories .sortable-list').sortable({ 
      start: function(event, ui) { 
       item = ui.item; 
       oldIndex = item.index(); 
       newList = oldList = ui.item.parent().parent(); 
      }, 
      change: function(event, ui) { 
       if (ui.sender) newList = ui.placeholder.parent().parent(); 
       // Check for empty list and hide/show instruction text 
       if (jQuery('.my-presentation-column .agile-list').has('li:not(".ui-sortable-helper")').length) { 
        self.isMyPresentationEmpty = false; 
       } else { 
        self.isMyPresentationEmpty = true; 
       } 
      }, 
      stop: function(event, ui) { 
       if (oldList[0] != jQuery(event.toElement).parent().parent().parent().parent()[0]) { 
        if (jQuery(event.target).parent().hasClass('slide-categories')) { 
         if (oldIndex == 0) { 
          jQuery(event.target).prepend(item.clone()); 
         } else { 
          jQuery(event.target).find('li:eq(' + (oldIndex - 1) + ')').after(item.clone()); 
         } 
        } else { 
         item.remove(); 
        } 
       } 
      }, 
      connectWith: ".sortable-list" 
     }).disableSelection(); 

Overal, wenn ich npm jquery installieren ausführen oder npm jquery-ui installieren bekomme ich

`--jquery-ui@1.10.5 extraneous 

als Ergebnis, so dass es installiert ist.

Ich hoffe jemand kann mir dabei helfen.

Answer 1

Wenn Sie typescript und angular2 verwenden, sollten Sie nur die typings für jquery und jquery-ui installieren. Sie könnten dann jQuery als solche laden:

import "jquery-ui" 
import * as $ from "jquery" 

Das andere Problem scheinen Sie ist mit, dass jquery-ui für require suchen, die nativ nicht im Browser. Ich würde verdoppeln überprüfen, wie Sie jquery-ui geladen werden, da es Fehler auch

Answer 2

Hier ist die Art und Weise könnte die Einführung ich es funktioniert:

• Fügen entsprechenden JS-Dateien im HTML-Hauptdatei

  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
  

• Wrap jquery().storable in eine benutzerdefinierte Richtlinie

  @Directive({ 
      selector: '[sortable]' 
  }) 
  export class SortableDirective { 
      constructor(private elementRef:ElementRef) { 
      } 
  
      ngOnInit() { 
      $(this.elementRef.nativeElement).sortable({ 
       start: function(event, ui) { 
       console.log('start'); 
       }, 
       change: function(event, ui) { 
       console.log('change'); 
       }, 
       stop: function(event, ui) { 
       console.log('stop'); 
       } 
      }).disableSelection(); 
      } 
  } 
  

• es auf diese Weise

  @Component({ 
      selector: 'app', 
      template: ` 
      <ul sortable> 
       <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
       <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 
      </ul> 
  `, 
      directives: [ SortableDirective ] 
  }) 
  export class App implements AfterViewInit { 
  } 
  

Sehen Sie diese plunkr Verwendung: https://plnkr.co/edit/gQnKzqdHCY82LOCFM1ym?p=preview.

In Bezug auf das Anforderungsproblem können Sie jquery-ui von SystemJS laden, da es die require-Funktion versteht. Hier ist ein Beispiel:

<script> 
    System.config({ 
    map: { 
     'jquery-ui': 'nodes_module/.../jquery-ui.js' 
    } 
    }); 
</script> 

Dann können Sie es auf diese Weise importieren:

import jqueryui from 'jquery-ui';