Question

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

我已经导入了所有内容，并且所有导入都可以使用，但是animation.gsap.js仍然找不到GSAP动画库。每次尝试进行服务时，都会出现以下错误：未找到模块：错误：无法解析'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";

就像我也说过的那样，我已经安装了Import-loader，它由ScrollMagic使用。

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

谢谢！

Answer 1

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

首先加载gsap，然后将滚动魔术加载为第二。

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

Answer 2

好吧，随便摆弄，再读几篇文章，我想出了一个解决方法。我使用了imports-loader。

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

如何将ScrollMagic和GSAP安装到Angular 7

2 个答案: