I followed this github story: https://github.com/angular/angular-cli/wiki/stories-configure-hmr
I am able to see changes after auto-refresh when I do ng serve (environment is Dev), however with ng serve --hmr -e=hmr, the page auto refreshes (like a flicker) without changes. I have to press F5 to see the changes.
HMR works fine, because I see my terminal output things like:
NOTICE Hot Module Replacement (HMR) is enabled for the dev server.
The project will still live reload when HMR is enabled,
but to take advantage of HMR additional application code is required
(not included in an Angular CLI project by default).
See https://webpack.github.io/docs/hot-module-replacement.html
for information on working with HMR for Webpack.
To disable this warning use "ng set --global warnings.hmrWarning=false"
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Date: 2017-08-15T16:20:34.579Z
Hash: f22425f08800b973e209
Time: 27866ms
chunk {about.module} about.module.chunk.js, about.module.chunk.js.map () 10.2 kB {main} [rendered]
chunk {admin.module} admin.module.chunk.js, admin.module.chunk.js.map () 21.9 kB {main} [rendered]
chunk {carbuilder.module} carbuilder.module.chunk.js, carbuilder.module.chunk.js.map () 56.9 kB {main} [rendered]
chunk {checkout.module} checkout.module.chunk.js, checkout.module.chunk.js.map () 117 kB {main} [rendered]
chunk {common} common.chunk.js, common.chunk.js.map (common) 79.8 kB {main} [rendered]
chunk {contact.module} contact.module.chunk.js, contact.module.chunk.js.map () 535 kB {main} [rendered]
chunk {details.module} details.module.chunk.js, details.module.chunk.js.map () 44 kB {main} [rendered]
chunk {garage.module} garage.module.chunk.js, garage.module.chunk.js.map () 14.5 kB {main} [rendered]
chunk {home.module} home.module.chunk.js, home.module.chunk.js.map () 13.8 kB {main} [rendered]
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 30.8 kB [entry] [rendered]
chunk {lease-options.module} lease-options.module.chunk.js, lease-options.module.chunk.js.map () 35.6 kB {main} [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 230 kB {vendor} [initial] [rendered]
chunk {makes-page.module} makes-page.module.chunk.js, makes-page.module.chunk.js.map () 16.9 kB {main} [rendered]
chunk {manage-cars.module} manage-cars.module.chunk.js, manage-cars.module.chunk.js.map () 7.82 kB {main} [rendered]
chunk {manage-edmunds.module} manage-edmunds.module.chunk.js, manage-edmunds.module.chunk.js.map () 17.9 kB {main} [rendered]
chunk {manage-fuel.module} manage-fuel.module.chunk.js, manage-fuel.module.chunk.js.map () 41 kB {main} [rendered]
chunk {manage-users.module} manage-users.module.chunk.js, manage-users.module.chunk.js.map () 45 kB {main} [rendered]
chunk {models.module} models.module.chunk.js, models.module.chunk.js.map () 161 kB {main} [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 204 kB {inline} [initial] [rendered]
chunk {profile.module} profile.module.chunk.js, profile.module.chunk.js.map () 19.4 kB {main} [rendered]
chunk {scripts} scripts.bundle.js, scripts.bundle.js.map (scripts) 700 kB {inline} [initial] [rendered]
chunk {search.module} search.module.chunk.js, search.module.chunk.js.map () 617 kB {main} [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 387 kB {inline} [initial] [rendered]
chunk {styles.module} styles.module.chunk.js, styles.module.chunk.js.map () 32.6 kB {main} [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 7.47 MB [initial] [rendered]
webpack: Compiled successfully.
webpack: Compiling...
Date: 2017-08-15T16:20:53.204Z
Hash: 706aa17d2700ff62481f
Time: 1991ms
chunk {about.module.0} about.module.0.chunk.js, about.module.0.chunk.js.map () 10.2 kB {main} [rendered]
chunk {admin.module.0} admin.module.0.chunk.js, admin.module.0.chunk.js.map () 21.9 kB {main} [rendered]
chunk {carbuilder.module.0} carbuilder.module.0.chunk.js, carbuilder.module.0.chunk.js.map () 56.9 kB {main} [rendered]
chunk {checkout.module.0} checkout.module.0.chunk.js, checkout.module.0.chunk.js.map () 117 kB {main} [rendered]
chunk {common} common.chunk.js, common.chunk.js.map (common) 79.8 kB {main}
chunk {contact.module.0} contact.module.0.chunk.js, contact.module.0.chunk.js.map () 535 kB {main} [rendered]
chunk {details.module.0} details.module.0.chunk.js, details.module.0.chunk.js.map () 44 kB {main} [rendered]
chunk {garage.module.0} garage.module.0.chunk.js, garage.module.0.chunk.js.map () 14.5 kB {main} [rendered]
chunk {home.module.0} home.module.0.chunk.js, home.module.0.chunk.js.map () 13.8 kB {main} [rendered]
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 30.8 kB [entry] [rendered]
chunk {lease-options.module.0} lease-options.module.0.chunk.js, lease-options.module.0.chunk.js.map () 35.6 kB {main} [rendered]
chunk {main} main.bundle.js, main.f22425f08800b973e209.hot-update.js, main.bundle.js.map, main.f22425f08800b973e209.hot-update.js.map (main) 230 kB {vendor} [initial] [rendered]
chunk {makes-page.module.0} makes-page.module.0.chunk.js, makes-page.module.0.chunk.js.map () 16.9 kB {main} [rendered]
chunk {manage-cars.module.0} manage-cars.module.0.chunk.js, manage-cars.module.0.chunk.js.map () 7.83 kB {main} [rendered]
chunk {manage-edmunds.module.0} manage-edmunds.module.0.chunk.js, manage-edmunds.module.0.chunk.js.map () 17.9 kB {main} [rendered]
chunk {manage-fuel.module.0} manage-fuel.module.0.chunk.js, manage-fuel.module.0.chunk.js.map () 41 kB {main} [rendered]
chunk {manage-users.module.0} manage-users.module.0.chunk.js, manage-users.module.0.chunk.js.map () 45 kB {main} [rendered]
chunk {models.module.0} models.module.0.chunk.js, models.module.0.chunk.js.map () 161 kB {main} [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 204 kB {inline} [initial]
chunk {profile.module.0} profile.module.0.chunk.js, profile.module.0.chunk.js.map () 19.4 kB {main} [rendered]
chunk {scripts} scripts.bundle.js, scripts.bundle.js.map (scripts) 700 kB {inline} [initial]
chunk {search.module.0} search.module.0.chunk.js, search.module.0.chunk.js.map () 617 kB {main} [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 387 kB {inline} [initial]
chunk {styles.module.0} styles.module.0.chunk.js, styles.module.0.chunk.js.map () 32.7 kB {main} [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 7.47 MB [initial]
webpack: Compiled successfully.
webpack: Compiling...
Date: 2017-08-15T16:21:03.313Z
Hash: 58a92fde8af93fa2196f
Time: 1843ms
chunk {about.module.1} about.module.1.chunk.js, about.module.1.chunk.js.map () 10.2 kB {main} [rendered]
chunk {admin.module.1} admin.module.1.chunk.js, admin.module.1.chunk.js.map () 21.9 kB {main} [rendered]
chunk {carbuilder.module.1} carbuilder.module.1.chunk.js, carbuilder.module.1.chunk.js.map () 56.9 kB {main} [rendered]
chunk {checkout.module.1} checkout.module.1.chunk.js, checkout.module.1.chunk.js.map () 117 kB {main} [rendered]
chunk {common} common.chunk.js, common.chunk.js.map (common) 79.8 kB {main}
chunk {contact.module.1} contact.module.1.chunk.js, contact.module.1.chunk.js.map () 535 kB {main} [rendered]
chunk {details.module.1} details.module.1.chunk.js, details.module.1.chunk.js.map () 44 kB {main} [rendered]
chunk {garage.module.1} garage.module.1.chunk.js, garage.module.1.chunk.js.map () 14.5 kB {main} [rendered]
chunk {home.module.1} home.module.1.chunk.js, home.module.1.chunk.js.map () 13.8 kB {main} [rendered]
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 30.8 kB [entry] [rendered]
chunk {lease-options.module.1} lease-options.module.1.chunk.js, lease-options.module.1.chunk.js.map () 35.6 kB {main} [rendered]
chunk {main} main.bundle.js, main.706aa17d2700ff62481f.hot-update.js, main.bundle.js.map, main.706aa17d2700ff62481f.hot-update.js.map (main) 230 kB {vendor} [initial] [rendered]
chunk {makes-page.module.1} makes-page.module.1.chunk.js, makes-page.module.1.chunk.js.map () 16.9 kB {main} [rendered]
chunk {manage-cars.module.1} manage-cars.module.1.chunk.js, manage-cars.module.1.chunk.js.map () 7.83 kB {main} [rendered]
chunk {manage-edmunds.module.1} manage-edmunds.module.1.chunk.js, manage-edmunds.module.1.chunk.js.map () 17.9 kB {main} [rendered]
chunk {manage-fuel.module.1} manage-fuel.module.1.chunk.js, manage-fuel.module.1.chunk.js.map () 41 kB {main} [rendered]
chunk {manage-users.module.1} manage-users.module.1.chunk.js, manage-users.module.1.chunk.js.map () 45 kB {main} [rendered]
chunk {models.module.1} models.module.1.chunk.js, models.module.1.chunk.js.map () 161 kB {main} [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 204 kB {inline} [initial]
chunk {profile.module.1} profile.module.1.chunk.js, profile.module.1.chunk.js.map () 19.4 kB {main} [rendered]
chunk {scripts} scripts.bundle.js, scripts.bundle.js.map (scripts) 700 kB {inline} [initial]
chunk {search.module.1} search.module.1.chunk.js, search.module.1.chunk.js.map () 617 kB {main} [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 387 kB {inline} [initial]
chunk {styles.module.1} styles.module.1.chunk.js, styles.module.1.chunk.js.map () 32.7 kB {main} [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 7.47 MB [initial]
webpack: Compiled successfully.
webpack: Compiling...
Date: 2017-08-15T16:22:13.165Z
Hash: c1ba43f0e7d9007e7183
Time: 2409ms
chunk {about.module.2} about.module.2.chunk.js, about.module.2.chunk.js.map () 10.2 kB {main} [rendered]
chunk {admin.module.2} admin.module.2.chunk.js, admin.module.2.chunk.js.map () 21.9 kB {main} [rendered]
chunk {carbuilder.module.2} carbuilder.module.2.chunk.js, carbuilder.module.2.chunk.js.map () 56.9 kB {main} [rendered]
chunk {checkout.module.2} checkout.module.2.chunk.js, checkout.module.2.chunk.js.map () 117 kB {main} [rendered]
chunk {common} common.chunk.js, common.chunk.js.map (common) 79.8 kB {main}
chunk {contact.module.2} contact.module.2.chunk.js, contact.module.2.chunk.js.map () 535 kB {main} [rendered]
chunk {details.module.2} details.module.2.chunk.js, details.module.2.chunk.js.map () 44 kB {main} [rendered]
chunk {garage.module.2} garage.module.2.chunk.js, garage.module.2.chunk.js.map () 14.5 kB {main} [rendered]
chunk {home.module.2} home.module.2.chunk.js, home.module.2.chunk.js.map () 13.8 kB {main} [rendered]
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 30.8 kB [entry] [rendered]
chunk {lease-options.module.2} lease-options.module.2.chunk.js, lease-options.module.2.chunk.js.map () 35.6 kB {main} [rendered]
chunk {main} main.bundle.js, main.58a92fde8af93fa2196f.hot-update.js, main.bundle.js.map, main.58a92fde8af93fa2196f.hot-update.js.map (main) 230 kB {vendor} [initial] [rendered]
chunk {makes-page.module.2} makes-page.module.2.chunk.js, makes-page.module.2.chunk.js.map () 16.9 kB {main} [rendered]
chunk {manage-cars.module.2} manage-cars.module.2.chunk.js, manage-cars.module.2.chunk.js.map () 7.83 kB {main} [rendered]
chunk {manage-edmunds.module.2} manage-edmunds.module.2.chunk.js, manage-edmunds.module.2.chunk.js.map () 17.9 kB {main} [rendered]
chunk {manage-fuel.module.2} manage-fuel.module.2.chunk.js, manage-fuel.module.2.chunk.js.map () 41 kB {main} [rendered]
chunk {manage-users.module.2} manage-users.module.2.chunk.js, manage-users.module.2.chunk.js.map () 45 kB {main} [rendered]
chunk {models.module.2} models.module.2.chunk.js, models.module.2.chunk.js.map () 161 kB {main} [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 204 kB {inline} [initial]
chunk {profile.module.2} profile.module.2.chunk.js, profile.module.2.chunk.js.map () 19.4 kB {main} [rendered]
chunk {scripts} scripts.bundle.js, scripts.bundle.js.map (scripts) 700 kB {inline} [initial]
chunk {search.module.2} search.module.2.chunk.js, search.module.2.chunk.js.map () 617 kB {main} [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 387 kB {inline} [initial]
chunk {styles.module.2} styles.module.2.chunk.js, styles.module.2.chunk.js.map () 32.7 kB {main} [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 7.47 MB [initial]
webpack: Compiled successfully.
I also see console outputs for HMR. what else can I do to fully take advantage of HMR?
What I already tried:
I disabled "safe write" form WebStorm.
I deleted and reinstalled
node_modules.