Angular CLI 热模块重载

Question

我关注了这个 github 故事：https://github.com/angular/angular-cli/wiki/stories-configure-hmr

当我执行

ng serve

（环境为 Dev）时，我能够在自动刷新后看到更改，但是使用

ng serve --hmr -e=hmr

，页面会自动刷新（像闪烁一样）而不会发生任何更改。我必须按

F5

才能看到更改。

HMR 工作正常，因为我看到我的终端输出如下：

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.

我还看到了 HMR 的控制台输出。我还可以做些什么来充分利用 HMR？

我已经尝试过：

1. 我禁用了 WebStorm 中的“安全写入”。

2. 我删除并重新安装了

   node_modules.

Answer 1

请尝试以下步骤 检查node、npm和Angular的版本， 更新依赖项， 您也可以重新启动开发服务器