Маршруты ленивой загрузки Angular 8 из пользовательской библиотеки не работают во время выполнения при сборке проекта с помощью AOT

Я намеревался получить доступ к некоторым маршрутам с ленивой загрузкой, определенным в пользовательской расширенной библиотеке. Все было в порядке, пока мне не захотелось собрать производственный пакет (активный AOT). Сборка прошла, но когда я пытаюсь добраться до маршрута, я получаю эту ошибку в консоли браузера:

Uncaught Error: Uncaught (in promise): Error: Runtime compiler is not loaded
Error: Runtime compiler is not loaded
at e.Jr (main.41ff3398f5c3f189c836.js:1)
at t.project (main.41ff3398f5c3f189c836.js:1)
at t._tryNext (main.41ff3398f5c3f189c836.js:1)
...

Я предполагаю, что это связано с атрибутом loadChildren, когда я собираю библиотеку, ng-packgr не удалось с новым синтаксисом отложенной загрузки Angular 8, функцией стрелки (это известная проблема https://github.com/ng-packagr/ng-packagr/issues/1285).

Ленивые маршруты определяются в пользовательской библиотеке следующим образом:

export function getRouteModule() {
  return RouteModule;
}
export const MAIN_APP_ROUTES: Routes = [
{
  path: 'route',
  loadChildren: getRouteModule
},
...
];

Затем в моем потребительском проекте:

@NgModule({
 imports: [
     BrowserModule,
     LibraryModule,
     RouterModule.forRoot(MAIN_APP_ROUTES, {useHash: true})
 ],
 declarations: [
     AppComponent
 ],
 bootstrap: [AppComponent]
 })
 export class AppModule {
 }

поэтому я попробовал несколько синтаксиса, старый в сочетании с библиотекой Angular должен быть отличным:

{
  path: 'route',
  loadChildren: '@MyLib/route/route.module#RouteModule'
},
...

но это не сработало.

Есть идеи ?


angular lazy-loading angular-aot
person Joffrey K    schedule 06.12.2019    source источник
comment
Это, скорее всего, не имеет ничего общего с ленивой загрузкой. Просто с тем фактом, что что-то в вашем коде зависит от присутствия компилятора времени выполнения. Скомпилируйте, используя --aot вместо --prod, и вам, вероятно, будет легче понять трассировку стека.   -  person JB Nizet    schedule 07.12.2019
comment
Извините, я обновил свой пост, эта проблема связана с библиотекой Angular. Действительно, это связано с ленивой загрузкой во время выполнения. Кажется, что Angular не может загружать маршруты из библиотеки без компилятора времени выполнения. При компиляции проблем нет, поэтому использование --aot вместо --prod не помогает.   -  person Joffrey K    schedule 07.12.2019
comment
Использование --aot, как я уже сказал, поможет упростить понимание трассировки стека. Не в устранении проблемы. Поймите это: github.com/ng-packagr/ng-packagr /проблемы/. Во-первых, вы не должны выполнять ленивую загрузку в библиотеке.   -  person JB Nizet    schedule 07.12.2019
comment
Конечно танки, но в моем случае результат точно такой же.   -  person Joffrey K    schedule 07.12.2019
comment
И почему бы нет ? Это зависит от контекста, как сказано далее github.com/ng -packagr/ng-packagr/issues/   -  person Joffrey K    schedule 07.12.2019
comment
Первая причина: потому что он не поддерживается и, следовательно, не будет работать, если кто-то не добавит для него поддержку. Вторая причина: потому что сопровождающий ng-packgr, часть команды Angular, считает это плохой идеей.   -  person JB Nizet    schedule 07.12.2019
comment
Кажется, что это плохой подход, но у них есть решение github.com/ angular/angular-cli/issues/ Я отвечу на свой пост позже с подходящим примером обернутого модуля.   -  person Joffrey K    schedule 09.12.2019

Ответы (1)


arrow_upward
0
arrow_downward

Как я обнаружил ранее в этом обсуждении: https://github.com/angular/angular-cli/issues/6373#issuecomment-453006158

Не рекомендуется управлять модулем с ленивой загрузкой внутри библиотеки Angular, потому что он на самом деле не поддерживается ng packagr. Более того, есть способ обойти эту проблему. Можно использовать модуль-оболочку, как описано в этом руководстве: https://medium.com/@tomastrajan/why-and-how-to-lazy-load-angular-libraries-a3bf1489fe24

Сначала вы должны определить модуль в своем приложении, который будет обертывать модуль из библиотеки:

import { NgModule } from '@angular/core';
import {RouteModule} from '@MyLib';

@NgModule({
  declarations: [],
  imports: [
   RouteModule
  ]
})
export class RouteWrapperModule { }

Затем определите такие маршруты в своем приложении:

import {Routes} from '@angular/router';

const routes: Routes = [
 // other routes
 {
  path: 'route',
  loadChildren: 'someWhereInTheMainApp/route-wrapper.module#RouteWrapperModule'
 }
];

Это решит ошибку с AOT во время выполнения.

person Joffrey K    schedule 08.12.2019