如何将ScrollMagic和GSAP安装到Angular 7中

我目前正在努力让ScrollMagic完全在Angular 7上工作。我已经安装了GSAP和ScrollMagic，但是为了让ScrollMagic工作，它还需要animation.GSAP.js插件

我已经导入了所有内容，所有导入都正常工作，但是animation.gsap.js仍然找不到gsap动画库。每次尝试ng服务时，我都会收到错误：未找到模块：错误：无法解析“TimelineMax”和未找到模块：错误：无法解析“TweenMax”

我读到过关于人们遇到的相同问题，但那是关于Angular 2的，一些事情已经改变了，我没有得到与那些人相同的结果

但到目前为止，我尝试导入我使用的所有脚本，但没有成功。这确实令人沮丧，因为GSAP和ScrollMagic的核心实际上在Angular 7中工作，但我似乎无法让插件工作。据我所知，插件在GSAP库加载之前加载。真正让我困惑的是，我先导入GSAP，然后是Scroll Magic，然后是插件。我试着改变进口商品的进货顺序，但没有任何效果

在脚本下的angular.json文件中，我有：

 "scripts": [
              "./node_modules/gsap/src/uncompressed/TweenMax.js",
              "./node_modules/parallax-js/dist/parallax.min.js",
              "./node_modules/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js",
              "./node_modules/scrollmagic/scrollmagic/minified/plugins/animation.gsap.js",
              "./node_modules/scrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"
            ],

然后在我的组件中，我将它们导入为：

import {Component, ElementRef, OnInit, ViewChild, AfterContentInit} from '@angular/core';
import {TweenMax , TimelineMax} from 'gsap/all';
import * as ScrollMagic from 'ScrollMagic';
import 'scrollmagic/scrollmagic/minified/plugins/animation.gsap.min'
import "ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min";

就像我说的，我已经安装了ScrollMagic使用的导入加载程序

我还通过从Chrome中的开发者工具在控制台中查询TweenMax和TimelineMax，验证了TweenMax和TimelineMax的有效性

提前谢谢

安装（最新）gsap，以便您可以使用它。

npm安装gsap

首先加载gsap，然后再加载scrollmagic

---

在ES6中，您可以通过以下方式加载gsap:

从“gsap/TweenMax”

导入{TweenMax，TimelineMax}

好吧，那就四处闲逛，多看几篇文章，我想出了一个解决办法。 我用的是进口加载器

npm install imports-loader

而不仅仅是将animation-gsap.js作为

import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'

我曾经

import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';