使用 TweenMax 库的 @angular/cli 项目出错

Question

我已经使用 .angular-cli.json 将 gsap 库与 @angular/cli 项目集成为此处显示的方法

installed the gsap package using the npm
add the uncompressed source file into the scripts section of the angular configuration.s

 **"scripts": ["node_modules/gsap/src/uncompressed/TweenMax.js"]**

app.component.ts 文件:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import {Power1, Bounce} from 'gsap/all';
declare var TweenMax: any;


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  @ViewChild('mushroom') box: ElementRef;

  ngOnInit(): void {
    this.doIt();
  }

  doIt(): void {
    TweenMax.fromTo(this.box.nativeElement, 2, { x: 20 }, { x: 440, ease: Power1.easeOut });
    TweenMax.fromTo(this.box.nativeElement, 1, {y:20}, {y: 440, ease:Bounce.easeOut})
  }
}

错误显示是

An unhandled exception occurred: Script file node_modules/gsap/src/uncompressed/TweenMax.js does not exist.

Answer 1

问题是您正在加载 GSAP 3 and you're trying to treat it like it's GSAP 2. GSAP 3 has no Max/Lite files (and we don't recommend using the Max/Lite syntax either). We recommend using the GSAP 3 installation page 以帮助您起床和运行。

在学习 GSAP 3 语法方面，使用 the GSAP 3 Migration Guide。

请注意，目前 a bug in the Angular build tool 可能会阻止您进行生产构建，但这不是 GSAP 问题。

使用 TweenMax 库的 @angular/cli 项目出错

Error in an @angular/cli project using TweenMax library

angular

gsap