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

Question

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

我已导入所有内容并且所有导入都正常，但animation.gsap.js仍无法找到GSAP动画库。每次我尝试服务时都会收到错误：找不到模块：错误：无法解析'TimelineMax'并且找不到模块：错误：无法解析'TweenMax'。

我已经读过人们有同样的问题，但是对于Angular 2来说，有些事情发生了变化，我得不到与那些人相同的结果。

但到目前为止我所尝试的是导入我使用的所有脚本import-loader但无济于事。这真是令人沮丧，因为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";

就像我还说我安装了import-loader，由ScrollMagic使用。

我还验证了TweenMax和TimelineMax是通过Chrome中的开发人员工具在控制台中查询它来工作的。

提前致谢！

Answer 1

安装（最新）gsap，以便你可以通过scrollmagic使用它。 npm install gsap。

加载gsap FIRST和scrollmagic为SECOND。

在ES6中，您可以通过以下方式加载gsap：import { TweenMax, TimelineMax } from "gsap/TweenMax";

Answer 2

好吧，如此摆弄并阅读更多帖子，我想出了一个修复。我用的是进口装载机。

npm install imports-loader

而不是仅仅导入动画-gsap.js

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

我用了

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