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

【问题标题】：How to install ScrollMagic and GSAP into Angular 7如何将 ScrollMagic 和 GSAP 安装到 Angular 7 中
【发布时间】：2019-04-11 13:19:17
【问题描述】：

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

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

我读到过人们遇到的同样问题，但那是针对 Angular 2 的，有些事情发生了变化，我没有得到与那些人相同的结果。

但到目前为止，我尝试的是导入我使用过的所有脚本 imports-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";

就像我也说过我安装了 ScrollMagic 使用的导入加载程序。

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

提前致谢！

【问题讨论】：

标签： angular gsap scrollmagic

【解决方案1】：

好吧，摆弄一下，再读几篇文章，我想出了一个修复方法。我使用了进口装载机。

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

【讨论】：

【解决方案2】：

安装（最新的）gsap 以便您可以通过 scrollmagic 使用它。 npm install gsap.

首先加载 gsap，然后将 scrollmagic 加载为 SECOND。

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

【讨论】：