-
Notifications
You must be signed in to change notification settings - Fork 11.9k
Closed
Labels
area: @schematics/angularfreq1: lowOnly reported by a handful of users who observe it rarelyOnly reported by a handful of users who observe it rarelyseverity3: brokentype: bug/fix
Milestone
Description
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/pwaandng 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
Labels
area: @schematics/angularfreq1: lowOnly reported by a handful of users who observe it rarelyOnly reported by a handful of users who observe it rarelyseverity3: brokentype: bug/fix