'Angular: 7.2.1 ES6 class ReferenceError : Cannot access 'X' before initialization

I'm having the following TypeScript class

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

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

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

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)

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

EDIT: The VehiculeGpsBoxInfo.ts file is importing Vehicule like this:

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.

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.

Solution 1:^[1]

You're probably running into this Angular issue: 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.

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

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

Solution 2:^[2]

I was getting this error due to a circular dependency, like

A injected with B
B injected with C
C injected with A

Removing the circular dependecy fixed this error.

Solution 3:^[3]

Note that this error can also be caused by defining two public @Injectable classes within the same .ts file.

I've tripped over this more than once when I'm just prototyping stuff locally (especially when refactoring one service into multiple).

Setting emitDecoratorMetadata: false does fix this situation as well; but in case you're in a hurry to fix something or don't want fiddle with thetsconfig.json file on a large project - it's useful to know that you might be able to fix it by just moving one of the classes into a new file.

Solution 4:^[4]

In Angular 8, having entryComponents declared as an empty list in a SharedModule caused this issue for me:

entryComponents: []

After removing entryComponents, everything worked fine.

Solution 5:^[5]

I ran into this due to the order of my import statements in the module. A file that also accessed the component had to be imported before the component.

Solution 6:^[6]

Circular dependency is the devil!

It causes the whole dependency loop to be unresolvable by the compiler. In most cases, the errors look like you are not importing the classes at all.

Some might think that circular dependencies should only be prevented in services and modules, However, circular dependency should be prevented in all forms, even in models, components, and classes.

When you have circular dependency it's a sign that (sooner or later) you need to refactor and restructure your code. The following hints might be useful to do so. Suppose we want to remove the circular dependency between two classes A, B.

Solution 1: Union/Merge

A and B are following the very same concept and they can be merged into a single class.

Solution 2: Separation/Creation

There should be a new class C, that both A and B rely on or sits somewhere between those two.

According to my experience, in most cases, the circular dependency happens because the developer tends to merge n logics into k (k<n) classes.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Community
Solution 2	Wesley GonÃ§alves
Solution 3
Solution 4	Hadrien TOMA
Solution 5	mbursill
Solution 6	Hamidreza Vakilian

'Angular: 7.2.1 ES6 class ReferenceError : Cannot access 'X' before initialization

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]