Skip to content

Generating app shell breaks HMR #21932

@HymanZHAN

Description

@HymanZHAN

Which @angular/* package(s) are the source of the bug?

platform-browser, service-worker

Is this a regression?

No

Description

  • Generate a new Angular application and install PWA + app-shell via ng add @angular/pwa and ng generate app-shell
  • Start the project with ng serve --hmr
  • Open the browser, change the code and observe the update in the browser.
  • Instead of an update, the blank page was presented.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 12.2.1
Node: 14.17.5
Package Manager: npm 6.14.14
OS: linux x64

Angular: 12.2.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.1
@angular-devkit/build-angular   12.2.1
@angular-devkit/core            12.2.1
@angular-devkit/schematics      12.2.1
@angular/platform-server        12.2.9
@angular/service-worker         12.2.9
@schematics/angular             12.2.1
rxjs                            6.6.7
typescript                      4.3.5

Anything else?

The cause of this is that the command ng generate app-shell wraps the bootstrap code in main.ts in a DOMContentLoaded event listener. During HMR there's no DOMContentLoaded event and that breaks the app bootstrapping process.

// main.ts after `ng g app-shell`
document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((err) => console.error(err));
});

However, I am not sure how this should be fixed. A workaround I have is to put this block of code inside the if (environment.production) block and leave the development behavior unchanged. So something like:

if (environment.production) {
  enableProdMode();

  document.addEventListener('DOMContentLoaded', () => {
    platformBrowserDynamic()
      .bootstrapModule(AppModule)
      .catch((err) => console.error(err));
  });
} else {
  // for hmr
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((err) => console.error(err));
}

Otherwise, I would suggest at least update the documentation and let the developers be aware of this situation.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions