Angular:7.2.1 ES6 类 ReferenceError:初始化前无法访问“X"

问题描述

我有以下 TypeScript 类

I'm having the following TypeScript class

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

我在 tsconfig.json 中的 typescript 目标配置为 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";

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

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

EDIT 3:经过进一步研究，这似乎与上面显示的代码无关.提出了一个关于 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 为真吗?

这个 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).

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