Javascript 错误：Can'；t解决'；TweenMax'；将Angular CLI与ScrollMagic和GSAP一起使用时

我正在尝试将Scrollmagic插件与Angular CLI集成。但是，我遇到了以下错误：

./~/ScrollMagic/ScrollMagic/minified/plugins/animation.gsap.min.js 未找到模块：错误：无法解析中的“TweenMax” “/Users/。/project/node_modules/ScrollMagic/ScrollMagic/minified/plugins”

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

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


  }
}

---

你应该“ng弹出”你的应用程序。这将使您能够访问Webpack（不，您不能返回，所以请确保备份）

安装导入加载程序非常重要。当webpack.config.js添加到您的项目根目录中时，请重新安装app

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的答案谢谢，这很有效。但是现在如何在不使用

ngbuild

命令的情况下编译项目？网页包中是否有任何等效选项？@RahulDagli

npm run build

或

npm run start

应该可以工作，请参阅脚本部分的package.json

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