angularwebpack-hmrhot-module-replacementangular9angular-ivy

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

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

Solution

  • 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