角度:7.2.1 ES6类ReferenceError:无法访问' X'初始化之前 [英] Angular: 7.2.1 ES6 class ReferenceError : Cannot access 'X' before initialization

问题描述

我有以下TypeScript类

I'm having the following TypeScript class

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

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

my typescript target in tsconfig.json is configured as es6:

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

在运行时，在Chrome中，代码失败，并显示以下信息:

At runtime, here in Chrome, the code is failing with:

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以解决

I needed to change es5 to es6 to solve this other problem.

VehiculeGpsBoxInfo.ts文件正在导入Vehicule，如下所示:

The VehiculeGpsBoxInfo.ts file is importing Vehicule like this:

import { Vehicule } from "./Vehicule";

我可以说这可能与webpack有关，这是在生成的模块中导出/导入模块的方式.

EDIT 2: I vould say that this may be webpack related, the way that modules are exported/imported in the genrated modules.

经过进一步研究，这似乎与上面显示的代码无关.提出了有关 webpack和ES6 的新问题.

EDIT 3: After further research, this seems to have nothing to do with the code shown above. Started a new question about webpack and ES6.

推荐答案

您可能正在遇到以下Angular问题: https://github.com/angular/angular-cli/issues/15077 .

You're probably running into this Angular issue: https://github.com/angular/angular-cli/issues/15077.

从该问题开始:

您是否有理由要把emitDecoratorMetadata设置为真?

Hi, is there a reason why you need emitDecoratorMetadata to be true?

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

This TypeScript option has a fundamental design limitation with ES2015+ code and is best avoided when targeting such output. As such this is an issue with TypeScript itself and not Angular.

Angular 8+不再需要该选项.以前，它仅以前仅在开发中使用的JIT模式才需要.

Angular 8+ no longer requires the option. It was also previously only required for JIT mode which is typically only used in development.

解决方案是在tsconfig.json文件中设置"emitDecoratorMetadata":false .

The solution is to set "emitDecoratorMetadata": false in your tsconfig.json file.

旁注:我必须说，鉴于以前的Angular CLI版本会自动添加 emitDecoratorMetadata:true ，所以我没有理由知道为什么开发人员应该知道 emitDecoratorMetadata 应该现在是 false ，Angular团队基本上说这不是我们的问题"，这简直太恐怖了.并没有采取任何行动就解决了这个问题.这本来可以很容易地固定"在屏幕上.通过添加一些更好的文档(如链接问题中的某人所指出).

Side note: I must say, given that previous versions of the Angular CLI automatically added emitDecoratorMetadata: true, and there's no reason I can see why a dev should know that emitDecoratorMetadata should now be false, it's pretty horrible that the Angular team basically said "this isn't our problem" and closed the issue without action. This could have been easily "fixed" by adding some better documentation (as pointed out by someone in the linked issue).

这篇关于角度:7.2.1 ES6类ReferenceError:无法访问' X'初始化之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！