错误:在使用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);
}
}
答
您应该弹出您的应用程序。这将让你访问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";
应该工作
目前发生同样的问题...... TweenMax是,我无法导入唯一的插件。 TweenLite,TimelineLite和Max,CSSplugins都可以工作。尝试绝对路径导入,而不是npm包,同样的问题。你有没有设法解决这个问题? –
@NicoPrat请参考LucitheR的答案 –