Угловая CLI HMR с Lazy-Loaded маршрутами hot-reloads все это

(Подтверждена проблема даже с Angular 7). Пусть это исправят!

Я использую HMR, как установлено здесь: https://github.com/angular/angular-cli/wiki/stories-configure-hmr из новой ng new сборки.

Если я изменю какой-либо компонент и сделаю его лениво загруженным, угловая 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

Ответ 1

Эта вики-страница angular-cli устарела: https://github.com/angular/angular-cli/issues/14053

Angular-HMR + ленивые маршруты в настоящее время не поддерживаются: https://github.com/PatrickJS/angular-hmr/issues/76

Для рабочего и нетривиального решения, загляните на https://github.com/wags1999/angular-hmr-lazy-components

Ответ 2

Сначала создайте этот будущий учебник: https://angular.io/guide/lazy-loading-ngmodules

Затем сделайте шаг за шагом этот учебник: https://github.com/angular/angular-cli/wiki/stories-configure-hmr

В проекте вы уже делаете. Убедитесь, что вы загрузили правильную загрузку! Это не может быть жестко закодировано.

На самом деле это похоже на то, как мы получили по умолчанию console.log(). After/$$_lazy_route_resource ленивый рекурсивный браузер строк больше ничего не скачивает. Получил одобрение, что работает ниже на рис

Ответ 3

Так же, как предупреждение для людей, получающих эту проблему. Я обновил angular-cli hmr и hmr перестал работать. Все, что он показал, это пустая страница.

За работой:

"@angular-devkit/build-angular": "0.10.2",
"@angular/cli": "^7.0.3",
"@angular/compiler-cli": "^7.0.3",

Не работает:

"@angular-devkit/build-angular": "~0.6.8",
"@angular/cli": "~7.0.6",
"@angular/compiler-cli": "^7.1.0",

Ответ 4

Одним из способов обхода может быть включение функции console.log по умолчанию в собственную пользовательскую функцию во время загрузки приложения для фильтрации всех журналов, связанных с HMR или WDS. Просто предложение избавиться от проблемы каротажа.