关于javascript：错误：在ScrollMagic和GSAP中使用Angular CLI时无法解析’TweenMax’


Error: Can't resolve 'TweenMax' while using Angular CLI with ScrollMagic and GSAP

我正在尝试将Scrollmagic插件与Angular CLI集成。 但是，我收到此错误：

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

我已经使用npm安装了GSAP和scrollmagic库：

1
2
npm install gsap
npm install scrollmagic

.angular-cli.json

1
2
3
4
5
6
"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"
      ],

零件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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(不，您不能返回，所以请确保备份。)。

1
npm install gsap imports-loader scrollmagic --save

安装imports-loader很重要。 将webpack.config.js添加到项目根目录后，请重新安装应用程序npm install，因为需要安装新内容，然后将其放入您的webpack别名中：

1
2
3
4
5
6
7
8
 "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'),},

将此添加到您的Component.ts中：

1
2
3
4
5
6
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";

那应该工作

相关讨论