Angular2 wie man 3rd Party Plugin mit AngularCLI (Webpack) hinzufügt

Question

Ich entwickle eine Angular2 App mit AngularCLI (Webpack Version). Ich habe ein 3rd-Party-Plugin (ScrollMagic), das selbst einen Satz optionaler Plugins hat. Ich habe die ScrollMagic Codebase installiert und sie befindet sich in node_modules. Ich kann ScrollMagic in meine Seite laden Sie die folgende Syntax verwendet:

let ScrollMagic = require("ScrollMagic"); 

Diese in node_modules und lädt ScrollMagic zu erreichen scheint, und ich kann das 3rd-Party-Plugin zu arbeiten.

ScrollMagic hat ein eigenes Plugin (ScrollMagic/plugins/debug.addIndicators.min.js) zum Debuggen. Ich habe Probleme, dieses Plugin geladen zu bekommen. Ich habe folgendes versucht:

require("ScrollMagic/plugins/debug.addIndicators.min.js"); 

und das Plugin kann nicht gefunden werden.

Ich benutze AngularCLI, also habe ich versucht, debug.addIndicators.min.js zum Abschnitt "scripts" von angular-cli.json hinzuzufügen. Dies lädt debug.addIndicators.min.js in den globalen Raum, aber ScrollMagic selbst scheint es nicht zu erkennen (zu diesem Zeitpunkt benutze ich immer noch ScrollMagic = require ("ScrollMagic"); um ScrollMagic selbst zu laden).

Ich versuchte dann ScrollMagic im Abschnitt "scripts" von angular-cli.json zu laden. Dies lädt SCrollMagic im globalen Raum, aber dann muss ich 'ScrollMagic = require ("ScrollMagic") von der Codebasis entfernen, sonst wird ScrollMagic zweimal geladen. Ich setze ScrollMagic: any, um TypeScript nicht zu beschweren, aber dann wird ScrollMagic niemals richtig instanziiert.

Was fehlt mir hier? Ich kann ScrollMagic dazu bringen, ohne das Debugging-Tool zu arbeiten, was ich für die Produktion möchte, aber ich kann es nicht für Entwicklungszwecke debuggen.

Vielen Dank im Voraus für Ihre Hilfe.

Answer 1

Ok, ich habe es herausgefunden. Das habe ich getan.

in dem Winkel cli.json hinzugefügt i dies in Skripten:

 "scripts": [ 
    "../node_modules/gsap/src/minified/TweenMax.min.js", 
    "../node_modules/scrollmagic/scrollmagic/minified/ScrollMagic.min.js", 
    "../node_modules/scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js", 
    "../node_modules/scrollmagic/scrollmagic/minified/plugins/debug.addIndicators.min.js" 
    ], 

jetzt, wenn ich meine Komponenten schreibe ich wie normale verwenden scrollmagic gerade, und ich habe Indikatoren und Scrollen Ereignisse.