HMR fails with Angular 9 + IVY: Type AppComponent is part of the declarations of 2 modules: AppModule and AppModule

Question

Affected Package

HMR + IVY

Is this a regression?

pre-IVY, it works

Description

Seems IVY and HMR don't play well together? However I've seen tickets of them that are closed so I suppose it should be possible. I have on re-load after code change:

Unnhandled Promise rejection: Type AppComponent is part of the declarations of 2 modules: AppModule and AppModule! Please consider moving AppComponent to a higher module that imports AppModule and AppModule. You can also create a new NgModule that exports and includes AppComponent then import that NgModule in AppModule and AppModule. Type Background is part of the declarations of 2 modules: AppModule and AppModule! Please consider moving Background to a higher module that imports AppModule and AppModule. You can also create a new NgModule that exports and includes Background then import that NgModule in AppModule and AppModule.

...

We can see how others investigated better: https://www.gitmemory.com/issue/storybookjs/storybook/8494/551763214

🌍 Current Environment

Angular Version:

ng 9.0.1

cli 9.0.1

Elatia

Did you find a solution to the matter? – Hazzard

No yet, Dear @SimonDragsbæk :/ – Elatia

Answer 1

Toggle on AOT in your angular.json config file, that should do it

Here is the structure of where:

{
  "projects": {
    "x": {
      "architect": {
        "build": {
          "options": {
            "aot": true,
          },
          "configurations": {
            "local": {
              "aot": true
            },

Alternatively, just for testing purposes, you can run with the aot flag instead

ng serve --aot=true

Update

As of Angular version 11 it is fully functional again

## Update

Note this is only fixing so you can actually work on your project, for now. The angular team is working on a solution so we can get our fully HMR support back, hopefully very soon.

Look here for the related issue in the angular repo https://github.com/angular/angular/issues/35265

And here for the PR put out to fix it (still in draft) https://github.com/angular/angular/pull/37474

Osteopath

Excellent, Dear Simon. This configuration worked for me: I understand that hmr must now be available to run in build AoT as IVY by default does. – Elatia

It triggers a full page reload for me...not working right. – Midcourse

@Midcourse but do you still get the error message: "Type AppComponent is part of the declarations of 2 modules..." - The other part is about configuring HMR correctly, try to hit up the angularclass/hmr repo for more information – Hazzard

@Midcourse I have looked into the issue a bit more extensively and updated this answer accordingly. – Hazzard

@SimonDragsbæk I didn't get any other errors. Just full module dependency tree gets reloaded on each HMR update. Awful to deal with this for nearly all of 2020! – Midcourse

@Midcourse which is awful and I think this answer should serve as a "status page" for the issue In question – Hazzard

@SimonDragsbæk I agree. Come on team Angular, you can do it! – Midcourse

@Midcourse It got fixed by ng11 but you might already know this – Hazzard