web-dev-qa-db-ja.com

Angular Lazy-Loadedルートを備えたCLI HMRはすべてをホットリロードします

（Angular 7）でも問題を確認しました。これを修正しましょう！

ここで設定したHMRを使用しています： https://github.com/angular/angular-cli/wiki/stories-configure-hmr from _ng new build。

コンポーネントを変更して遅延ロードすると、angular HMRはすべてをホットリロードし、ページの同期を遅くします。

これは、リロードされるすべてのモジュールがデフォルトでconsole.logに設定されており、遅延ルートを使用しているときにすべてをログに記録するためです。しかし、そのコンポーネントを非遅延ロードに変更すると、いくつかの小さなコンポーネントのみがログに記録されます。

したがって、HMRと遅延ルートを使用している場合、アプリの更新にはさらに数秒かかります。これは面倒です。

これを回避する方法はありますか？

（遅延読み込みルートは、このようなものによって達成されます）

// Main homepage
{
  path: '',
  loadChildren: './public/home/home.module#HomeModule'
},
// ...

（正しい方法で遅延ロードしていることを示すための単なる例です）

home.component.tsを遅延ロードしたときに何が起こるかを示すためのログを次に示します

// Everything here is normal, great!
[HMR]  - ../../../../../src/app/public/home/home.component.html
log.js:23 [HMR]  - ../../../../../src/app/public/home/home.component.ts
log.js:23 [HMR]  - ../../../../../src/app/public/home/home.module.ts
log.js:23 [HMR]  - ../../../../../src/app/public/home/home.routing.ts
// Everything below here is NOT normal, bad!  All this is extra.  These are my modules, yes, but all this needs to be loaded again?
log.js:23 [HMR]  - ../../../../../src/$$_lazy_route_resource lazy recursive
log.js:23 [HMR]  - ../../../core/esm5/core.js
log.js:23 [HMR]  - ../../../platform-browser-dynamic/esm5/platform-browser-dynamic.js
log.js:23 [HMR]  - ../../../common/esm5/common.js
log.js:23 [HMR]  - ../../../platform-browser/esm5/platform-browser.js
log.js:23 [HMR]  - ../../../router/esm5/router.js
log.js:23 [HMR]  - ../../../../../src/app/shared/shared.module.ts
log.js:23 [HMR]  - ../../../common/esm5/http.js
log.js:23 [HMR]  - ../../../../../src/app/features/proxy-http-interceptor/proxy-http-interceptor.ts
log.js:23 [HMR]  - ../../../../../src/app/shared/unauthorized-http-interceptor.ts
log.js:23 [HMR]  - ../../../../../src/app/features/auth/auth.service.ts
log.js:23 [HMR]  - ../../../../../src/app/features/user/user.service.ts
log.js:23 [HMR]  - ../../../../@auth0/angular-jwt/index.js
log.js:23 [HMR]  - ../../../../@auth0/angular-jwt/src/jwt.interceptor.js
log.js:23 [HMR]  - ../../../../@auth0/angular-jwt/src/jwthelper.service.js
log.js:23 [HMR]  - ../../../../@auth0/angular-jwt/src/jwtoptions.token.js
log.js:23 [HMR]  - ../../../../../src/app/shared/container.directive.ts
log.js:23 [HMR]  - ../../../flex-layout/esm5/flex-layout.es5.js
...
...
A ton more logging
angularangular-cliangular7webpack-hmrhot-module-replacement
53
Augie Gardner

最初にこの将来のチュートリアルを作成します： https://angular.io/guide/lazy-loading-ngmodules

次に、このチュートリアルを段階的に作成します。 https://github.com/angular/angular-cli/wiki/stories-configure-hmr

プロジェクトですでに作成しています。必ず必ずダウンロードしてくださいbootstrap=正しい!!!ハードコーディングすることはできません。

実際、デフォルトのconsole.log（）を取得したようです。 After /$$_lazy_route_resource怠zyな再帰行ブラウザは他に何もダウンロードしていません。下の写真で働いていることを承認しました

enter image description hereAngular7 Lazy hmr

1
Mises

この angular-cli wikiページ は非推奨です： https://github.com/angular/angular-cli/issues/1405

現在、Angular-HMR +遅延ルートはサポートされていません： https://github.com/PatrickJS/angular-hmr/issues/76

実用的で重要なソリューションについては、 https://github.com/wags1999/angular-hmr-lazy-components をご覧ください

0
Nico Toub