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

Question

Terminal -

    "WARNING in Invalid constructor parameter decorator in D:/New folder/SilverLife/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"

I am facing this issue while integrating Angular firebase in my Angular 9 project.

On Stack Overflow, please don't share pictures of text. Copy the text into the question itself, and format it so that it's easy to read, copy, and search. — Doug Stevenson, Jul 04 '20 at 18:43
I'm also having the same issue and found this open issue in AngularFire GitHub repo. Downgrading to 6.0.0 did not work for me. https://github.com/angular/angularfire/issues/2521 — Luis Cabrera, Jul 09 '20 at 01:10

score 86 · Accepted Answer · answered Jul 15 '20 at 09:46

86

Try changing target in the compilerOptions of your tsconfig.json from es5 to es2015

answered Jul 15 '20 at 09:46

Hubert Formin

950
7
5

3

If you set to ´es2015´ it won´t work for IE 11, as you can see in this post https://medium.com/angular-in-depth/angular-and-internet-explorer-a6e4b5a5dae1 – apaternina Aug 11 '20 at 21:27
6

@apaternina it's time to stop supprt IE 11. Even Microsoft tends to do it: https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666 – JBeen Sep 09 '20 at 21:01
But does this solution really work? I'm facing same issue for `OwlDateTimeIntl`. It says:- `Error on worker #2: Error: getInternalNameOfClass() called on a non-ES5 class: expected OwlDateTimeIntl to have an inner class declaration at Esm5ReflectionHost.getInternalNameOfClass` – Chetan Oswal Oct 17 '20 at 06:58
This did not work for me in ng9 too. @iLoveUnicorns postinstall worked https://stackoverflow.com/questions/62733064/error-in-getinternalnameofclass-called-on-a-non-es5-class-expected-angularfi#answer-63727427 – Guntram Mar 09 '21 at 15:52
This did not work from me in ng 9. Here is the open issue https://github.com/highcharts/highcharts-angular/issues/261 – Nirav Shah Apr 05 '21 at 11:50

iLoveUnicorns · Answer 2 · 2020-09-03T16:16:36.757

54

I encountered same issue during migration from Angular8 to Angular9.

In Angular9 they introduced new generation compilation and rendering pipeline called Angular Ivy. The documentation says:

Ivy applications can be built with libraries that were created with the View Engine compiler. This compatibility is provided by a tool known as the Angular compatibility compiler (ngcc). CLI commands run ngcc as needed when performing an Angular build.

Source: https://angular.io/guide/ivy

So in order to project with "target": "es5" work, after using npm install you have to run ngcc.

You can add it in your package.json file:

{
  "scripts": {
    "postinstall": "ngcc"
  }
}

Then it should run automaticly after running npm install.

edited Sep 03 '20 at 16:16

answered Sep 03 '20 at 15:58

iLoveUnicorns

590
4
8

1

Although the accepted answer works,for few dependent external modules where `es2015` is actually required changing it will not work. This did. – Bhavik Patel Feb 22 '21 at 15:48
1

Your answer allowed me to understand the problem came from Ivy, so I simply disabled it with angularCompilerOptions/enableIvy: false. Obviously we'll have to upgrade the whole project to Ivy one day, but for now, it works. – Hadrien01 Feb 23 '21 at 10:37
The solution worked fine, but I needed to use the `--unsafe-perm` flag (`npm install --unsafe-perm`), since the build process is being runned as root. `--unsafe-perm` was mentioned by Yassine Khachlek [here](https://stackoverflow.com/questions/18136746/npm-install-failed-with-cannot-run-in-wd). More about `--unsafe-perm` [here](https://geedew.com/What-does-unsafe-perm-in-npm-actually-do/). – Fábio Magagnin Apr 06 '21 at 21:56

score 2 · Answer 3 · answered May 06 '21 at 02:00

I had to use the following in tsconfig.json:

  "angularCompilerOptions": {
    "enableIvy": false,
  }

Not ideal but it worked.

Adding

  "scripts": {
    "postinstall": "ngcc"
  }

to package.json and changing target to es2015 in tsconfig.json didn't work - probably some other setting(s) messing with them.

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

3 Answers3

Linked