jQuery ist nicht in bootstrap-sass definiert

Ich habe die Angular 2-App mit angle-cli gestartet. Alles war einfach, bis ich entschied, Bootstrap-Modal zu verwenden. Ich habe einfach den Code kopiert, um das Modal von unserem anderen Projekt zu öffnen, das kein angular-cli verwendet. Ich habe Jquery- und Bootstrap-Abhängigkeiten zu Skripten in der angular-cli.json-Datei hinzugefügt. jQuery wird im Projekt erkannt, aber wenn ich versuche, dies auszuführen this.$modalEl.modal(options) innerhalb der angularkomponente Ich erhalte den Fehler, dass jQuery is not defined .

Eigentlich wird jQuery in ein Projekt importiert, aber als globales $ . Ich habe etwas gegraben und anscheinend Bootstrap erwartet, dass jQuery als eine ‘jQuery’-Variable in es übergeben wird. Es gibt keinen Arsch über $ .

Ich könnte jQuery als Variable in der Datei webpack.config.js , so wie wir es in anderen Projekten tun: (eine Menge Code wird aus webpack.config.js weggelassen)

 var jQueryPlugin = { $: 'jquery', jquery: 'jquery', jQuery: 'jquery' } exports.root = root; exports.plugins = { globalLibProvider: new webpack.ProvidePlugin(webpackMerge(jQueryPlugin, { svg4everybody: 'svg4everybody/dist/svg4everybody.js' })) } 

aber das angular-cli dev-team hat sich entschieden, andere devs nicht in die webpack-config-dateien einmischen zu lassen. Danke Leute! Sehr aufmerksam von dir.

Ich habe versucht, jQuery direkt in Angular-Komponente und eine Reihe anderer Dinge zu importieren, die hier erwähnt werden https://github.com/angular/angular-cli/issues/3202 (Hinzufügen von Importen zur Datei vendor.ts und dann Hinzufügen von vendor.ts zu Skripte Array in angular-cli.json) aber nichts funktioniert.

Um ehrlich zu sein, ich bin ziemlich angepisst, dass solch ein triviales Problem wie das Hinzufügen von jquery Abhängigkeiten, die mit bootstrap in angular-cli verwendet werden, ein solches Minenfeld ist.

Haben Sie sich mit ähnlichen Problemen beschäftigt?

   

Schritt eins

 npm install jssha --save [using jssha for this demo] It it is your own custom file place it in the scripts array of angular-cli.json skip this step 1 

Schritt zwei

 Add the jssha scripts file in .angular-cli.json file "scripts": [ "../node_modules/jssha/src/sha.js" ] Step three Adding a var in component to be used as a global variable //using external js modules in Angular Component declare var jsSHA: any; // place this above the component decorator shaObj:any; hash:string; this.shaObj = new jsSHA("SHA-512", "TEXT"); this.shaObj.update("This is a Test"); this.hash = this.shaObj.getHash("HEX") 

Schaut euch diesen Link an . Es hat ein funktionierendes Beispiel und eine Frage für dasselbe mit typings und ohne es. Ich habe Bootstrap und Jquery mit Angular in diesem Projekt verwendet, Sie können auch das Repo überprüfen.

In Ihrem Fall müssen Sie die jquery-Dateien hinzufügen

so in deinem angular-cli.json

  "styles": [ "../node_modules/bootstrap-v4-dev/dist/css/bootstrap.min.css", "styles.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.min.js", "../node_modules/bootstrap-v4-dev/dist/js/bootstrap.min.js" 

und deklariere dann in der Komponente. declare var $: any;

Das sollte funktionieren.

AKTUALISIEREN

Ich fuhr fort, ein Modal Bootstrap zu erstellen, indem ich nur jquery in Angular benutze, indem ich die erwähnten Schritte benutze.

Es funktioniert Überprüfen Sie diesen gh-Seitenlink – LINK .

und wenn Sie den Quellcode für den gleichen Check LINK überprüfen möchten.

Die Antwort, die ich gepostet habe, kam von diesem Link das ist meine Seite auf Angular LINK

Ich habe Bootstrap nicht mit Angular 2 verwendet, aber ich habe mit Angular 1 und die Situation ist die gleiche, da die reguläre Version von Bootstrap für die Arbeit mit jQuery entwickelt wurde und nicht mit Angular im Hinterkopf gebaut wurde. Sie können natürlich jQuery installieren, aber das Javascript funktioniert möglicherweise nicht wie erwartet im Kontext von Angular.

Die einfachste Lösung ist die Verwendung einer Version, die auf Angular basiert, und ich glaube, dass ng-bootstrap die prominenteste davon ist. Ich habe es selbst nicht benutzt, aber ich habe angular-ui-bootstrap für Angular 1 verwendet und dies scheint ein Angular 2-Pendant zum selben Projekt zu sein.

Alternativ können Sie es auch selbst in eine Direktive einfügen , aber das würde ich vermeiden, wenn Sie mit ng-bootstrap tun können, was Sie wollen, da es viel mehr Arbeit bedeutet.

Sie können den Befehl ng eject , damit Angular CLI die Datei webpack.config generiert.

Setzen Sie jQuery dann wie zuvor als Variable frei.