Angular CLI Hot Module Reload

南笙酒味 提交于 2020-01-01 04:44:05

问题


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:

  1. I disabled "safe write" form WebStorm.

  2. I deleted and reinstalled node_modules.

来源:https://stackoverflow.com/questions/45697229/angular-cli-hot-module-reload

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!