Angular 5无法使用GreenSock动画文件

我有一个Angular 5应用程序，目前正在使用GreenSock.js库和ScrollMagic.js实现滚动动画。一个非常重要的文件，由于某种原因，它不会让我包括在项目中没有错误调用

scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js

当我尝试将此文件导入到项目中时，我收到一个错误列表-

./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Can't resolve 'TimelineMax' in '/Users/RyanIndustries8/Documents/Projects/WebSites/megakyle83/node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
 @ ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61
 @ ./src/app/home/home.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./node_modules/webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
errors @ client:167
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:883
SockJS._transportMessage @ sockjs.js:881
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2957
wrapFn @ zone.js:1166
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1517
globalZoneAwareCallback @ zone.js:1543
client:167 

./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
    Module not found: Error: Can't resolve 'TweenMax' in '/Users/RyanIndustries8/Documents/Projects/WebSites/megakyle83/node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
     @ ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61
     @ ./src/app/home/home.component.ts
     @ ./src/app/app.module.ts
     @ ./src/main.ts
     @ multi ./node_modules/webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

Uncaught ReferenceError: tween is not defined
    at HTMLDocument.eval (home.component.ts:34)
    at l (scripts.bundle.js:2)
    at c (scripts.bundle.js:2)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Zone.runTask (zone.js:188)
    at ZoneTask.invokeTask (zone.js:496)
    at ZoneTask.invoke (zone.js:485)
    at timer (zone.js:2025)

这是我的component.ts文件中的内容-

import { Component, OnInit, Injectable } from '@angular/core';
import { Router } from '@angular/router';
import * as $ from 'jquery';
import { TweenMax, TimelineMax, ScrollToPlugin } from 'gsap';
import * as ScrollMagic from 'ScrollMagic';
import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';
import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';

declare var $:any;
declare var TweenMax: any;
declare var TimelineMax: any;
declare var tween: any;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  // intro: object [];

  constructor(private router: Router) {

  }

public  ngOnInit() {
    $(document).ready(function() {
      //Init Scroll Magic
      var controller = new ScrollMagic.Controller();

      var scrollScene = new ScrollMagic.Scene({
        triggerElement: 'a.leanArrow',
        triggerHook: "onLeave"
      })
      .setTween()
      .addIndicators({
        name: 'fade scene',
        colorTrigger: 'orange',
        colorStart: '#0000ff'
      })
      .addTo(controller);

      controller.scrollTo(function (newpos){
        TweenMax.to(window, 0.5, {scrollTo: {y: newpos}});
      });

      $(document).on("click", "a[href^='#']", function(e) {
        var id = $(this).attr("href");
        if($(id).length > 0) {
          e.preventDefault();

          controller.scrollTo(id);

          if (window.history && window.history.pushState) {
            history.pushState(", document.title, id");
          }
        }
      });

    //loop through each img
    $('img').each(function() {
    //build scene
    var ourScene = new ScrollMagic.Scene({
    triggerElement: this,
    triggerHook: 0.6
  })

  .setClassToggle(this, 'fade-in')
  .addIndicators({
    name: 'fade scene',
    colorTrigger: 'black',
    colorStart: '#ff0000'
  })
  .addTo(controller);
  });

    //Manage animatedMenu
    var animatedMenu = new ScrollMagic.Scene({
    triggerElement: 'section',
    triggerHook: 0.1
  })

  .setClassToggle('#animatedMenu', 'fade-in')
  .addIndicators({
    name: 'menu scene',
    colorTrigger: 'purple',
    colorStart: '#00ff00'
  })
  .addTo(controller);
}
}

---

有人知道如何用Angular中的animation.gsap.js文件修复此问题吗？

游戏后期，但我最近遇到了相同的问题和解决方案，我发现需要弹出应用程序或无法工作

这是我根据几条综合答案得出的结论

假设您已经安装了gsap和scrollmagic节点模块：

安装导入加载程序和类型/greensock

npm install imports-loader @types/greensock --save

在tsconfig.app.json中，确保greensock位于编译器对象的类型数组中：

"types": [
  "node", "greensock"
]

在需要scrollmagic+gsap的模块中，使用以下导入声明：

import 'imports-loader?define=>false!scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js';
import { TimelineMax} from 'gsap';
import * as ScrollMagic from 'scrollmagic';