Angular 2/4 - Wie ScrollMagic mit Gsap installieren?

Question

Ich habe eine einfache Frage:

Wie richtig in einer eckigen Anwendung, ScrollMagic und Gsap verwenden?

Was ich getan habe:

npm install ScrollMagic 

npm install gsap 

In Winkel cli.json:

"scripts": [ 
    "../node_modules/gsap/src/uncompressed/tweenmax.js", 
    "../node_modules/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js", 
    "../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js", 
    "../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/debug.addindicators.js" 
], 

in meiner Komponente:

import {TweenLite, Power2, TimelineMax, TweenMax} from "gsap"; 
import * as ScrollMagic from 'ScrollMagic'; 
import * as $ from 'jquery'; 
import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'; 
import "scrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"; 

Aber das funktioniert nicht. Ich bekomme einen Fehler.

Hat schon jemand das Plugin auf seiner angular 2 App installiert?

Danke.

Answer 1

ich es geschafft, dies durch den folgenden Code an der Spitze meiner Komponente einschließlich:

declare let ScrollMagic: any; 
declare let TweenMax: any; 

dieses Typoskript Lassen Sie uns wissen, dass Sie eine globale Variable verwenden. Nachdem Sie diesen Code hinzugefügt haben, können Sie die relevanten Importe aus Ihrer Komponente entfernen. Stellen Sie sicher, dass Sie Ihre Skripte in Ihrem angular-cli.json behalten, Sie waren dort auf dem richtigen Weg! Wenn Sie auf andere globale Variablen verweisen müssen, können Sie dies mit der gleichen Methode tun.