使用 AOT 构建项目时，来自自定义库的 Angular 8 延迟加载路由在运行时中断

Question

我打算访问自定义扩展库中定义的一些延迟加载路由。一切都很好，直到我想构建一个生产包(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'
},
...

但它没有奏效。

知道吗？

Answer 1

正如我在本讨论前面发现的那样： 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 的错误。