エラー：ScrollMagicとGSAPでAngular CLIを使用しているときに 'TweenMax'を解決できない

Question

ScrollmagicプラグインをAngular CLIと統合しようとしています。

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" 
     ], 

コンポーネント：私はGSAPとscrollmagicライブラリ使用してNPMをインストールした

./~/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'

：しかし、私はこのエラーを取得しています

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

あなたのアプリを取り出してください。それはあなたにWebpackへのアクセスを与えます（あなたは戻れませんので、必ずバックアップしてください）。

npm install gsap imports-loader scrollmagic --save 

インポートローダーをインストールすることが重要です。 webpack.config.jsは、プロジェクトのルートに追加されたときにインストールする必要があると新しいものがあるので、アプリnpm installを再インストールし、その後あなたのWebPACKの別名でこれを置く：

"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'),}, 

があなたのコンポーネントにこれを追加.TS：現時点では同じ問題を抱えて