Question

我正在尝试部署Angular App，但是在运行ng build --prod --base-href .之后，我在Chrome中遇到以下错误

main.afc84290417a517dd6c3.js:1 Uncaught TypeError: Cannot set property _autoActivated' of undefined
    at Object.zUnb (main.afc84290417a517dd6c3.js:1)
    at p (runtime.a66f828dca56eeb90e02.js:1)
    at Object.5 (main.afc84290417a517dd6c3.js:1)
    at p (runtime.a66f828dca56eeb90e02.js:1)
    at n (runtime.a66f828dca56eeb90e02.js:1)
    at Array.e [as push] (runtime.a66f828dca56eeb90e02.js:1)
    at main.afc84290417a517dd6c3.js:1

ng -v输出

Angular CLI: 6.0.8
Node: 8.11.2
OS: darwin x64
Angular: 6.0.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

我不太确定该如何调试？运行ng serve，应用运行正常。

搜索项目时，对_autoActivated的唯一引用是在TweenMax.js中

export const TweenMax = TweenMaxBase;
TweenMax._autoActivated = [TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, BezierPlugin, RoundPropsPlugin, DirectionalRotationPlugin, Back, Elastic, Bounce, RoughEase, SlowMo, SteppedEase, Circ, Expo, Sine, ExpoScaleEase];

应用依赖项-

 "@angular/animations": "^6.0.7",
    "@angular/cdk": "^6.3.1",
    "@angular/common": "^6.0.7",
    "@angular/compiler": "^6.0.7",
    "@angular/core": "^6.0.7",
    "@angular/forms": "^6.0.7",
    "@angular/http": "^6.0.7",
    "@angular/material": "^6.3.1",
    "@angular/platform-browser": "^6.0.7",
    "@angular/platform-browser-dynamic": "^6.0.7",
    "@angular/router": "^6.0.7",
    "@types/three": "^0.92.11",
    "core-js": "^2.5.4",
    "gsap": "^2.0.1",
    "hammerjs": "^2.0.8",
    "normalize-scss": "^7.0.1",
    "normalize.css": "^8.0.0",
    "rxjs": "^6.2.1",
    "three": "^0.87.1",
    "three-effectcomposer-es6": "0.0.4",
    "three-screen-quad": "^0.2.1",
    "zone.js": "^0.8.26"

Answer 1

我有同样的问题。您必须将以下脚本添加到angular.json

"scripts": [
              "./node_modules/gsap/umd/TweenMax.js",
              "./node_modules/gsap/umd/ScrollToPlugin.js"]

Answer 2

我遇到了同样的问题，这是由GSAP结合Angular的Build Optimizer引起的。

您可以通过进入angular.json来禁用此功能，但要花一些文件大小。像这样设置生产构建配置：

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": false, // <-- This ensures compatibility with GSAP
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

Answer 3

遇到相同的问题，将gsap切换到另一个库，例如popmotions，它可以工作。

这是因为TweenMax使用了getBoundingClientRect()之类的函数，并尝试将div附加到dom上来确定某些内容。显然，这在服务器中是不可能的。

我仍然更喜欢gsap而不是popmotion（我认为这是可怕的语法），但是我已经尝试了很多事情。

•延迟加载gsap（不理想）。

•调整gsap库（不理想）

•模拟窗口，文档和导航器以及名为domino的库

没有运气。如果有人找到gsap的解决方案，我很想听听。

Answer 4

我当前正在使用Angular 9.0.7。我的生产版本也有问题，并收到了一些错误消息。无需将脚本添加到Angular.json文件。使用正常的导入也就足够了。因此，请不要导入“全部”。

以下解决方案对我有帮助：

在 Main.ts 文件中包括以下代码行：

import { gsap } from 'gsap';
import { CSSPlugin } from 'gsap/CSSPlugin';

gsap.registerPlugin(CSSPlugin);

享受！

Answer 5

使用import {TweenMax} from 'gsap/umd/TweenMax';代替import {TweenMax} from 'gsap/TweenMax'；

Answer 6

尝试更改您的进口商品。来自类似的东西：

import { TweenLite } from 'gsap'

类似：

import { TweenLite } from 'gsap/all'

ng build --prod =无法设置未定义的属性“ _autoActivated”

6 个答案: