Fehler: 'TweenMax' kann nicht aufgelöst werden, während die Verwendung von Angular CLI mit ScrollMagic und GSAP

Question

Ich versuche Scrollmagic Plugin mit Angular CLI zu integrieren. Allerdings erhalte ich diese Fehlermeldung:

npm install gsap 
npm install scrollmagic 

.angular-cli.json

"scripts": [ 
     "../node_modules/gsap/src/uncompressed/TweenMax.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" 
     ], 

Komponente:

./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js Module not found: Error: Can't resolve 'TweenMax' in '/Users/../project/node_modules/ScrollMagic/scrollmagic/minified/plugins'

I GSAP und scrollmagic Bibliothek npm installiert haben

import { Component, OnInit } from '@angular/core'; 
import { TweenMax, TimelineMax } from "gsap"; 
import * as ScrollMagic from 'ScrollMagic'; 
import "ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"; 
import "ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js"; 


@Component({ 
    selector: 'app-floating-butterfly', 
    templateUrl: './floating-butterfly.component.html', 
    styleUrls: ['./floating-butterfly.component.scss'] 
}) 
export class FloatingButterflyComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    var controller = new ScrollMagic.Controller(); 
    var scene = new ScrollMagic.Scene({ 
     triggerElement: ".floating-butterfly" 
    }) 
    .setTween(".floating-butterfly", 0.5, {backgroundColor: "green", scale: 2.5}) // trigger a TweenMax.to tween 
    .addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin) 
    .addTo(controller); 


    } 
} 

Answer 1

Sie sollten Ihre App auswerfen. Dadurch erhalten Sie Zugriff auf Webpack (nein, Sie können nicht zurückgehen, also stellen Sie sicher, dass Sie sichern.).

npm install gsap imports-loader scrollmagic --save 

Es ist wichtig, dass Sie den Import-Loader installieren. wenn die webpack.config.js zu einem Projekt Wurzel hinzugefügt wird, installieren Sie die App npm install, da es neue Dinge sind, die installiert werden benötigt, danach diese Aliase in Ihren webpack setzen:

"alias": { 
"TweenLite": path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'), 
"TweenMax": path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'), 
"TimelineLite": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'), 
"TimelineMax": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'), 
"ScrollMagic": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'), 
"animation.gsap": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'), 
"debug.addIndicators": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js'),}, 

dies zu Ihrer Komponente hinzufügen .ts:

import 'imports-loader?define=>false!animation.gsap'; 
import ScrollMagic from 'ScrollMagic'; 
import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators'; 
import {TweenMax} from 'gsap/TweenMax'; 
import {TweenLite} from 'gsap/TweenLite'; 
import {ScrollToPlugin} from "gsap/ScrollToPlugin"; 

die