Verwenden von Tether mit Webpack (Angular CLI)

Ich entwickle ein Projekt mit Angular CLI. So habe ich Tether unter Verwendung npm install tether --save installiert und die Abhängigkeit in app.component.ts mit import * as Tether from 'tether' importiert.Verwenden von Tether mit Webpack (Angular CLI)

Wenn ich versuche, Tether zu initialisieren mit new Tether({ ... }) druckt der folgende Fehler in der Konsole:

AUSNAHME: WEBPACK_IMPORTED_MODULE_4_tether ist kein Konstruktor

Wenn ich die Tether Variable drucken console.log(Tether) mit es gibt Ich, was ist, scheint ein leeres Objekt zu sein.

Könnt ihr mir helfen? Ich habe noch nie zuvor weder das Typoskript noch das Webpack benutzt, daher tut es mir leid, wenn ich hier etwas übersehen habe.

Quelle

2017-02-06 wm1sr

Verwenden Sie import Tether from 'tether'; Dies importiert den Standard-Export von Tether, die die TetherClass ist, die Sie in Instanziate versuchen.

Der Code import * as Tether importiert alle (standardmäßigen und benannten) Exporte der Bibliothek, und Sie müssten new Tether.TetherClass().

Überprüfen Sie die großen Exploring ES6 book on modules für Details.

Quelle

2017-02-06 13:17:49 simon04

Wenn ich 'Import Tether von‚anbinden versuchen ''oder' import * als Tether' unter Verwendung von 'new Tether.TetherClass()' tritt derselbe Fehler auf: Er sagt mir, dass dieses Objekt kein Konstruktor ist. Und wenn ich console.log TetherClass bekomme ich null :( – wm1sr

Die Art, die ich versuchte zu vermitteln ist "importieren Tether von 'Tether'; neue Tether();'. Wenn dies nicht funktioniert: Welche Version von Tether verwenden Sie? – simon04

tether version 1.4.0 – wm1sr

Da Sie Angukar-cli verwenden, werden Sie das zu Ihrem Winkel cli.json

In Ihrer Datei (Winkel cli.json) sind sie unter dem Scripts Array hinzufügen:

"scripts": [ 
      "other/scripts/you've used" 
      "../node_modules/tether/dist/js/tether.min.js", 
      "../node_modules/tether-shepherd/dist/js/shepherd.min.js" 
     ],

Fügen Sie die CSS in Stilen.

Hoffe das klappt.

Quelle

2017-02-14 11:45:15

Wenn Sie Bootstrap4 verwenden, ist tether.js bereits eine Abhängigkeit. Dies könnte

Mit Angular-cli

Erste arbeiten, installieren Sie Bootstrap von npm:

npm installieren Bootstrap @ nächsten

Then add the needed script files to angular-cli.json --> scripts: 



"scripts": [ 
      "../node_modules/jquery/dist/jquery.js", 
      "../node_modules/tether/dist/js/tether.js", 
      "../node_modules/bootstrap/dist/js/bootstrap.js" 
      ], 

Finally add the Bootstrap CSS to the angular-cli.json --> styles array: 

    "styles": [ 
    "../node_modules/bootstrap/dist/css/bootstrap.css", 
    "styles.css"`enter code here` 
], 

Restart ng serve if you're running it, and Bootstrap 4 should be working on your app.

Für Webpack

Wenn Sie das Webpack verwenden:

Richten Sie den Bootstrap-Loader wie in docs beschrieben ein;

Installieren Sie tether.js über npm;

tether.js zum webpack ProvidePlugin Plugin hinzufügen:

plugins: [ 
     <... your plugins here>, 
     new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery", 
      "window.jQuery": "jquery", 
      "window.Tether": 'tether' 
     }) 
    ]

Bootstrap 4 nicht mehr Tag-Fenster.Tether

Note that using Bootstrap 4.0.0-alpha.6,

Bootstrap ist keine Kontrolle mehr für "window.Tether" aber die globale Variable "Tether", so die webpack Konfiguration wird

plugins: [ 
    <... your plugins here>, 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery", 
     "window.jQuery": "jquery", 
     "Tether": 'tether' 
    }) 
]

Quelle

2017-02-14 13:45:14

Verwenden von Tether mit Webpack (Angular CLI)

Antwort

Verwandte Themen