錯誤：在使用Angular CLI與ScrollMagic和GSAP時無法解析'TweenMax'

我正在嘗試將Scrollmagic插件與Angular CLI集成。不過，我得到這個錯誤：錯誤：在使用Angular CLI與ScrollMagic和GSAP時無法解析'TweenMax'

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

我已經安裝了GSAP和scrollmagic庫使用NPM：

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

組件

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); 


    } 
}

來源

2017-09-11 Rahul Dagli

目前發生同樣的問題...... TweenMax是，我無法導入唯一的插件。 TweenLite，TimelineLite和Max，CSSplugins都可以工作。嘗試絕對路徑導入，而不是npm包，同樣的問題。你有沒有設法解決這個問題？ –

@NicoPrat請參考LucitheR的答案 –

您應該彈出您的應用程序。這將讓你訪問Webpack（不，你不能回去，所以一定要備份）。

npm install gsap imports-loader scrollmagic --save

安裝imports-loader很重要。當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：

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";

應該工作

來源

2017-12-01 14:01:36 LucitheR

錯誤：在使用Angular CLI與ScrollMagic和GSAP時無法解析'TweenMax'

回答

相關問題