javascript - Angular: 7.2.1 clase ES6 ReferenceError: No se puede acceder a 'X' antes de la inicialización

Estoy teniendo la siguiente clase de TypeScript

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

mi objetivo de TypeScript en tsconfig.json está configurado como es6:

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

En tiempo de ejecución, aquí en Chrome, el código está fallando con:

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)

Necesitaba cambiar de es5 a es6 para resolver este otro problema.

EDITAR: El archivo VehiculeGpsBoxInfo.ts está importando Vehicule de esta manera:

import { Vehicule } from "./Vehicule";

EDIT 2: Yo diría que esto puede estar relacionado con webpack, la forma en que los módulos se exportan/importan en los módulos generados.

EDICIÓN 3: Después de una investigación más profunda, esto parece no tener nada que ver con el código mostrado arriba. Inicié una nueva pregunta sobre webpack y ES6.

Respuesta #1

Estaba recibiendo este error debido a una dependencia circular, como

A inyectado con B
B inyectado con C
C inyectado con A

Eliminar la dependencia circular solucionó este error.

Respuesta #2

Probablemente te estés encontrando con este problema de Angular: https://github.com/angular/angular-cli/issues/15077.

De ese número:

Hola, ¿hay alguna razón por la que necesitas que emitDecoratorMetadata sea verdadero?
Esta opción de TypeScript tiene una limitación de diseño fundamental con el código ES2015+ y es mejor evitarla cuando se apunta a dicho resultado. Como tal, este es un problema del propio TypeScript y no de Angular.
Angular 8+ ya no requiere la opción. También anteriormente solo era requerida para el modo JIT, que normalmente solo se utiliza en desarrollo.

La solución es establecer "emitDecoratorMetadata": false en su archivo tsconfig.json.

Nota al margen: Debo decir que, dado que las versiones anteriores del Angular CLI automáticamente añadían emitDecoratorMetadata: true, y no veo ninguna razón por la que un desarrollador deba saber que emitDecoratorMetadata ahora debería ser false, es bastante horrible que el equipo de Angular básicamente dijera "este no es nuestro problema" y cerrara el problema sin tomar medidas. Esto podría haberse "arreglado" fácilmente añadiendo una mejor documentación (como señaló alguien en el problema enlazado).

Respuesta #3

para encontrar dependencias circulares :

npx madge --circular --extensions ts ./

(construir antes)

Respuesta #4

Tenga en cuenta que este error también puede ser causado por definir dos clases públicas @Injectable dentro del mismo archivo .ts.

Me he tropezado con esto más de una vez cuando solo estoy prototipando cosas localmente (especialmente al refactorizar un servicio en múltiples).

Configurar emitDecoratorMetadata: false también soluciona esta situación; pero en caso de que tengas prisa por arreglar algo o no quieras trastear con el archivo tsconfig.json en un proyecto grande, es útil saber que podrías solucionarlo simplemente moviendo una de las clases a un nuevo archivo.

Respuesta #5