Javascript Angular：7.2.1 ES6 类 ReferenceError：初始化前无法访问“X”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/56870661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular: 7.2.1 ES6 class ReferenceError : Cannot access 'X' before initialization
提问by Olivier MATROT
I'm having the following TypeScript class
我有以下 TypeScript 类
export class Vehicule extends TrackableEntity {
vehiculeId: number;
constructor() {
super();
return super.proxify(this);
}
}
my typescript target in tsconfig.json is configured as es6:
我在 tsconfig.json 中的打字稿目标配置为 es6：
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es6",
}
At runtime, here in Chrome, the code is failing with:
在运行时，在 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)
I needed to change es5 to es6 to solve this other problem.
我需要将 es5 更改为 es6 以解决另一个问题。
EDIT: The VehiculeGpsBoxInfo.ts file is importing Vehicule like this:
编辑：VehiculeGpsBoxInfo.ts 文件正在像这样导入 Vehicule：
import { Vehicule } from "./Vehicule";
EDIT 2: I vould say that this may be webpack related, the way that modules are exported/imported in the genrated modules.
编辑 2：我想说这可能与 webpack 相关，即模块在生成的模块中导出/导入的方式。
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.
编辑 3：经过进一步研究，这似乎与上面显示的代码无关。开始了一个关于webpack 和 ES6的新问题。
回答by John
You're probably running into this Angular issue: https://github.com/angular/angular-cli/issues/15077.
您可能遇到了这个 Angular 问题：https: //github.com/angular/angular-cli/issues/15077。
From that issue:
从那个问题：
Hi, is there a reason why you need emitDecoratorMetadata to be true?
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+ no longer requires the option. It was also previously only required for JIT mode which is typically only used in development.
嗨，有什么理由需要emitDecoratorMetadata 为真吗？
这个 TypeScript 选项对 ES2015+ 代码有一个基本的设计限制，在针对此类输出时最好避免。因此，这是 TypeScript 本身的问题，而不是 Angular。
Angular 8+ 不再需要该选项。它以前也只在 JIT 模式中需要，而 JIT 模式通常只在开发中使用。
The solution is to set "emitDecoratorMetadata": falsein your tsconfig.json file.
解决方案是"emitDecoratorMetadata": false在您的 tsconfig.json 文件中进行设置。
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 emitDecoratorMetadatashould 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).
旁注：我必须说，鉴于之前版本的 Angular CLI 会自动添加emitDecoratorMetadata: true，而且我没有理由明白为什么开发人员应该知道emitDecoratorMetadata现在应该是false，Angular 团队基本上说“这不是我们的问题”并在不采取任何行动的情况下关闭了问题。通过添加一些更好的文档（正如链接问题中的某人所指出的那样），这可以很容易地“修复”。
回答by Ali Jarwan
that make sense, you are passing the local object (Vehicle) to the parent class within constructor return super.proxify(this);.
这是有道理的，您正在将本地对象 ( Vehicle)传递给构造函数中的父类return super.proxify(this);。
Keep in mind the local Vehicleinstance has not been instantiated yet (constructor block is not finished yet), so you cannot use this object in the mean time, you need to wait the constructor to done it's job.
请记住，本地Vehicle实例尚未实例化（构造函数块尚未完成），因此您不能同时使用此对象，您需要等待构造函数完成它的工作。
