Angularfire: [6.0.2] Invalid constructor parameter decorator Error: getInternalNameOfClass() called on a non-ES5 class: expected AngularFireModule to have an inner class declaration

[almothafar]

Version info

Angular: latest 9.x (9.1.11)

Firebase: latest (7.15.4)

AngularFire: latest (6.0.2)

Other (e.g. Ionic/Cordova, Node, browser, operating system): Ionic project with Cordova

How to reproduce these conditions

Upgrade to 6.0.2

Steps to set up and reproduce

I just moved from 6.0.0 to 6.0.2 and I ran ng run app:build:production (actually it is ionic who runs this, I'm running ionic build --prod --engine=browser

I downgraded version to 6.0.0 and the issue has gone!

didn't test 6.0.1.

Debug output

* Errors in the JavaScript console *

Invalid constructor parameter decorator in /build/node_modules/@angular/fire/fesm2015/angular-fire.js:
2020-06-24T21:31:36.0631768Z  () => [
2020-06-24T21:31:36.0631839Z     { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
2020-06-24T21:31:36.0631866Z ]
2020-06-24T21:31:36.0765241Z Error: Error on worker #2: Error: getInternalNameOfClass() called on a non-ES5 class: expected AngularFireModule to have an inner class declaration
2020-06-24T21:31:36.0765770Z     at Esm5ReflectionHost.getInternalNameOfClass (/build/node_modules/@angular/compiler-cli/ngcc/src/host/esm5_host.js:88:23)
2020-06-24T21:31:36.0766052Z     at DelegatingReflectionHost.getInternalNameOfClass (/build/node_modules/@angular/compiler-cli/ngcc/src/host/delegating_host.js:89:34)
2020-06-24T21:31:36.0766437Z     at NgModuleDecoratorHandler.analyze (/build/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/ng_module.js:206:78)
2020-06-24T21:31:36.0766721Z     at NgccTraitCompiler.TraitCompiler.analyzeTrait (/build/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:345:40)
2020-06-24T21:31:36.0766995Z     at analyze (/build/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:297:58)
2020-06-24T21:31:36.0767263Z     at _loop_1 (/build/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:319:21)
2020-06-24T21:31:36.0767536Z     at NgccTraitCompiler.TraitCompiler.analyzeClass (/build/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:325:35)
2020-06-24T21:31:36.0767813Z     at NgccTraitCompiler.analyzeFile (/build/node_modules/@angular/compiler-cli/ngcc/src/analysis/ngcc_trait_compiler.js:47:26)
2020-06-24T21:31:36.0768099Z     at DecorationAnalyzer.analyzeProgram (/build/node_modules/@angular/compiler-cli/ngcc/src/analysis/decoration_analyzer.js:134:39)
2020-06-24T21:31:36.0768363Z     at Transformer.analyzeProgram (/build/node_modules/@angular/compiler-cli/ngcc/src/packages/transformer.js:129:57)
2020-06-24T21:31:36.0768628Z     at ClusterMaster.onWorkerMessage (/build/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:194:27)
2020-06-24T21:31:36.0769358Z     at /build/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:54:95
2020-06-24T21:31:36.0769758Z     at ClusterMaster.<anonymous> (/build/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:292:57)
2020-06-24T21:31:36.0769821Z     at step (/build/node_modules/tslib/tslib.js:140:27)
2020-06-24T21:31:36.0769858Z     at Object.next (/build/node_modules/tslib/tslib.js:121:57)
2020-06-24T21:31:36.0769914Z     at /build/node_modules/tslib/tslib.js:114:75
2020-06-24T21:31:36.0769943Z     at new Promise (<anonymous>)
2020-06-24T21:31:36.0769984Z     at Object.__awaiter (/build/node_modules/tslib/tslib.js:110:16)
2020-06-24T21:31:36.0770250Z     at EventEmitter.<anonymous> (/build/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:286:32)
2020-06-24T21:31:36.0770300Z     at EventEmitter.emit (events.js:311:20)
2020-06-24T21:31:36.1038646Z An unhandled exception occurred: NGCC failed.

[protradeshare-admin]

Same problem here

Warning: Invalid constructor parameter decorator in C:/xxx/node_modules/@angular/fire/fesm2015/angular-fire.js:
 () => [
    { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
]
Error: Error on worker #1: Error: getInternalNameOfClass() called on a non-ES5 class: expected AngularFireModule to have an inner class declaration

But also with older versions in Angular 9

[anujbiyani]

Same error with
Angular: 9.1.11
Firebase: 7.15.5
AngularFire: 6.0.2

I get this with a standard ng serve.

AngularFire 6.0.1 works fine.

[almothafar]

I can confirm, version 6.0.1 is working fine, but not 6.0.2.

[MarceloFSMartins]

I also had the same error with
Angular: 9.0.5
Firebase: 7.13.1
AngularFire: 6.0.2

AngularFire 6.0.0 worked for me.

[senzacionale]

Any info when this will be fixed. I have same problem.

[kagisoW]

Change compilerOptions in tsconfig.json file from es5 to es2015,

[shalvy]

@kagisoW same error

Compiling @angular/fire : module as esm5

chunk {main} main.js, main.js.map (main) 2.07 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 127 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 465 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 2.55 MB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 2.31 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 342 kB [initial] [rendered]
Date: 2020-08-01T10:18:53.377Z - Hash: 13cae3f8479f10323d22 - Time: 7933ms

WARNING in Invalid constructor parameter decorator in {[project directory]}/node_modules/@angular/fire/fesm2015/angular-fire.js:
() => [
{ type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
]

ERROR in getInternalNameOfClass() called on a non-ES5 class: expected AngularFireModule to have an inner class declaration

[AndreaDiCioccio]

after migrating from angular8 to angular10, passing through angular9 I also have this type of error at least with an app:
tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "es2020",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

errors:

Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: LocationStrategy, },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: PlatformLocation, },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [APP_BASE_HREF,] },] },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: PlatformLocation, },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [APP_BASE_HREF,] },] },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: undefined, decorators: [{ type: Inject, args: [LOCALE_ID,] },] },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: IterableDiffers, },
{ type: KeyValueDiffers, },
{ type: ElementRef, },
{ type: Renderer, },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: ViewContainerRef, },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: ViewContainerRef, },
{ type: TemplateRef, },
{ type: IterableDiffers, },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: ViewContainerRef, },
{ type: TemplateRef, },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return []; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: ViewContainerRef, },
{ type: TemplateRef, },
{ type: NgSwitch, decorators: [{ type: Host },] },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: ViewContainerRef, },
{ type: TemplateRef, },
{ type: NgSwitch, decorators: [{ type: Host },] },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: NgLocalization, },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: undefined, decorators: [{ type: Attribute, args: ['ngPluralCase',] },] },
{ type: TemplateRef, },
{ type: ViewContainerRef, },
{ type: NgPlural, decorators: [{ type: Host },] },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: KeyValueDiffers, },
{ type: ElementRef, },
{ type: Renderer, },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: ViewContainerRef, },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: ChangeDetectorRef, },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return []; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return []; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return []; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: undefined, decorators: [{ type: Inject, args: [LOCALE_ID,] },] },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: undefined, decorators: [{ type: Inject, args: [LOCALE_ID,] },] },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: undefined, decorators: [{ type: Inject, args: [LOCALE_ID,] },] },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: undefined, decorators: [{ type: Inject, args: [LOCALE_ID,] },] },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return [
{ type: NgLocalization, },
]; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return []; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return []; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return []; }
Warning: Invalid constructor parameter decorator in /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js:
function () { return []; }
Error: Failed to find exported name of node (CommonModule = (function () {
function CommonModule() {
}
return CommonModule;
}())) in '/home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/angular-font-awesome/dist/angular-font-awesome.js'.
at Object.findExportedNameOfNode (/home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/@angular/compiler-cli/src/ngtsc/imports/src/find_export.js:36:19)
at LogicalProjectStrategy.emit (/home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/@angular/compiler-cli/src/ngtsc/imports/src/emitter.js:229:38)
at ReferenceEmitter.emit (/home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/@angular/compiler-cli/src/ngtsc/imports/src/emitter.js:72:44)
at Object.toR3Reference (/home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/util.js:193:31)
at NgModuleDecoratorHandler._toR3Reference (/home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/ng_module.js:415:31)
at /home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/ng_module.js:195:72
at Array.map ()
at NgModuleDecoratorHandler.analyze (/home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/ng_module.js:195:38)
at NgccTraitCompiler.TraitCompiler.analyzeTrait (/home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:346:40)
at analyze (/home/andrea/lavoro/angular/Angular-Animations-Owl-Carousel-Demo/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:298:58)
An unhandled exception occurred: NGCC failed.
See "/tmp/ng-n4BDxd/angular-errors.log" for further details.

[AndreaDiCioccio]

I solved removing all references and node_modules of angular-font-awesome, now I', using @fortawesome/angular-fontawesome 0.7.0

[almothafar]

Change compilerOptions in tsconfig.json file from es5 to es2015,

It is maybe the solution, I added the following .browserslistrc (to disable es5)

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

and have es2015 in tsconfig.json:

{
  "compilerOptions": {
...
    "target": "es2015",
    "module": "esnext",
    "lib": [
      "es2019",
      "dom"
    ],
...
}

and I got Angular 10 now and seems everything is fine.

[jamesdaniels]

Seems to have work-around, closing.

[nelson6e65]

Yes. By disabling compatibility with old browsers.