Angular：7.2.1 ES6 类 ReferenceError：初始化前无法访问“X”

Question

我有以下 TypeScript 类

export class Vehicule extends TrackableEntity {
  vehiculeId: number;
  constructor() {
    super();
    return super.proxify(this);
  }
}

我在 tsconfig.json 中的打字稿目标配置为 es6：

"compilerOptions": {
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es6",
}

在运行时，在 Chrome 中，代码失败：

ReferenceError: Cannot access 'Vehicule' before initialization
    at Module.Vehicule (https://localhost:44338/src-app-components-dispositifsDATI-dispositifsDATI-module.js:10559:100)
    at Module../src/app/domain/models/VehiculeGpsBoxInfo.ts (https://localhost:44338/src-app-components-dispositifsDATI-dispositifsDATI-module.js:11156:69)
    at __webpack_require__ (https://localhost:44338/runtime.js:84:30)
    at Module../src/app/domain/models/Vehicule.ts (https://localhost:44338/src-app-components-dispositifsDATI-dispositifsDATI-module.js:10571:78)
    at __webpack_require__ (https://localhost:44338/runtime.js:84:30)
    at Module../src/app/components/dispositifsDATI/mainDATI/listDATI/listDATI.component.ts (https://localhost:44338/src-app-components-dispositifsDATI-dispositifsDATI-module.js:6447:82)
    at __webpack_require__ (https://localhost:44338/runtime.js:84:30)
    at Module../src/app/components/dispositifsDATI/index.ts (https://localhost:44338/src-app-components-dispositifsDATI-dispositifsDATI-module.js:3053:95)
    at __webpack_require__ (https://localhost:44338/runtime.js:84:30)
    at Module../src/app/components/dispositifsDATI/dispositifsDATI.routes.ts (https://localhost:44338/src-app-components-dispositifsDATI-dispositifsDATI-module.js:2982:64)

我需要将 es5 更改为 es6 以解决另一个问题。

---

编辑：VehiculeGpsBoxInfo.ts 文件正在像这样导入 Vehicule：

import { Vehicule } from "./Vehicule";

编辑 2：我想说这可能与 webpack 相关，即模块在生成的模块中导出/导入的方式。

编辑 3：经过进一步研究，这似乎与上面显示的代码无关。开始了一个关于webpack 和 ES6的新问题。

Answer 1

您可能遇到了这个 Angular 问题：https : //github.com/angular/angular-cli/issues/15077。

从那个问题：

嗨，有什么理由需要emitDecoratorMetadata 为真吗？

这个 TypeScript 选项对 ES2015+ 代码有一个基本的设计限制，在针对此类输出时最好避免。因此，这是 TypeScript 本身的问题，而不是 Angular。

Angular 8+ 不再需要该选项。它以前也只在 JIT 模式中需要，而 JIT 模式通常只在开发中使用。

解决方案是"emitDecoratorMetadata": false在您的 tsconfig.json 文件中进行设置。

旁注： 我必须说，鉴于之前版本的 Angular CLI 会自动添加emitDecoratorMetadata: true，而且我没有理由明白为什么开发emitDecoratorMetadata人员现在应该知道应该是false，Angular 团队基本上说“这不是我们的问题”并在不采取任何行动的情况下关闭了问题。通过添加一些更好的文档（正如链接问题中的某人所指出的那样），这可以很容易地“修复”。

Answer 2

找到循环依赖：

npx madge --circular --extensions ts ./

（之前构建）

Answer 3

由于循环依赖，我收到此错误，例如

• A 注入 B
• B注入C
• C 注入 A

删除循环依赖修复了这个错误。

Answer 4

请注意，@Injectable在同一.ts文件中定义两个公共类也可能导致此错误。

当我只是在本地制作原型时（尤其是在将一项服务重构为多项服务时），我不止一次被这个问题绊倒。

设置emitDecoratorMetadata: false也解决了这种情况；但是如果您急于修复某些内容或不想tsconfig.json在大型项目中摆弄文件 - 知道您可以通过将其中一个类复制到新文件中来修复它很有用。

Answer 5

由于模块中导入语句的顺序，我遇到了这个问题。必须在组件之前导入也访问该组件的文件。