Cannot access 'MyComponent' before initialization in Angular 10

Question

I get the Cannot access 'MyComponent' before initialization error message in the browser.

The ng build ran without errors.

I did a little research about this topic and found suggestions to update my app's tsconfig.base.json file with this setting:

{
  "compilerOptions": {
    "emitDecoratorMetadata": false
  }
}

It's not helped. So added this:

  "annotateForClosureCompiler": {
    "annotateForClosureCompiler": true
  }

Also not helped. So tried to change the target from es2015 to any newer but not solved the problem.

I tried to change these settings on my library too (what contains the component), but isn't helped.

I checked these discussions:

• Same issue in Angular 7.2.1
• Next question from Oliver Matrot
• Property decorators break at runtime with ES2015 and circular deps on GitHub angular/angular
• ES2015 + emitDecoratorMetadata causes Cannot access before intialization on GitHub angular/angular-cli

In my case I use 10.1.6 from Angular packages:

{
  "dependencies": {
    "@angular/animations": "^10.1.6",
    "@angular/cdk": "^10.2.5",
    "@angular/common": "^10.1.6",
    "@angular/compiler": "^10.1.6",
    "@angular/core": "^10.1.6",
    "@angular/forms": "^10.1.6",
    "@angular/material": "^10.2.5",
    "@angular/platform-browser": "^10.1.6",
    "@angular/platform-browser-dynamic": "^10.1.6",
    "@angular/router": "^10.1.6",
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1001.3",
    "@angular/cli": "^10.1.7",
    "@angular/compiler-cli": "^10.1.6",
  }
}

Any idea?

Answer 1

I solved my circular dependency on my library and the error is gone.