Angular CLI wiki: HMR docs are out of date

📚 Docs or angular.io bug report

Description

Angular’s HMR (hot module replacement) docs are old and the steps don’t work anymore with @angularclass/hmr. https://github.com/angular/angular-cli/wiki/stories-configure-hmr

---

I spent a lot of time to get HMR to work based on the official Angular docs but it seems like these steps don’t work anymore. Not sure if Webpack has changed its API or @angularclass/hmr but the current steps in the official Angular docs don’t work anymore and the new steps that are documented in the original @angularclass/hmr docs work pretty well.

These 2 comments explain the simplest solution to get HMR to work with the latest Angular, Webpack and @angularclass/hmr: https://github.com/PatrickJS/angular-hmr/issues/81#issuecomment-449999297 https://github.com/PatrickJS/angular-hmr/issues/81#issuecomment-450028896

Simplest working solution (written by @Epono), anyone can clone and run it: https://github.com/Epono/angular-7-hmr

🔬 Minimal Reproduction

Just follow the steps in the official Angular docs on a new Angular project ng new test-app and it won’t work.

What’s the affected URL?**

https://github.com/angular/angular-cli/wiki/stories-configure-hmr

Reproduction Steps**

Just follow the steps in the official Angular docs on any new Angular project ng new test-app and it won’t work.

Expected vs Actual Behavior**

Expected: When a source file changes Webpack’s HMR picks up the changes and communicates it to the browser. Ideally it should refresh part of the page but at least it should display the fact of change in the console.

Actual: When the page is loaded in a browser (with ng serve --configuration hmr and a source file is changed (and saved) Webpack doesn’t do anything, it doesn’t load any new file over the network and it doesn’t display any change in the browser console, there’s no error in the browser console or the terminal.

🌍 Your Environment

Any new Angular install (ng new test-hmr-project)

Browser info

This isn’t a browser specific issue

Anything else relevant?

Probably caused by updated Webpack API or updated @angularclass/hmr API which isn’t reflected in the old (Aug 2, 2018) official Angular docs

[Splaktar]

Note that the wiki’s source (which isn’t in sync with the actual wiki) is found here: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/configure-hmr.md

Also note that that source has the following:

Documentation below is deprecated and we no longer accept PRs to improve this. The new documentation is available here.

Also please note that the Angular CLI GitHub Wiki is no longer the “official Angular docs” for the Angular CLI as mentioned on the wiki landing page:

NOTE: this documentation is for Angular CLI 6. For Angular CLI Version 7 go here and 1.x go here instead.

And finally, it should be noted that there are no HMR docs for Angular version 7.

It would be helpful, as there is lots of interest, for someone to write a blog post that could later be turned into a PR to the official docs.

[Prinsn]

Also, hopefully the docs make it clear how to use HMR with Lazy Loading.

If Angular 8 is going to push dynamic importing, as well as Lazy Loading and not make it clear how to put it all together, that’d be extremely lackluster.