Angular 当使用 AOT 构建项目时，自定义库中的 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的bug

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

Angular 8 lazy loading routes from custom library broken at runtime when project build with AOT

lazy-loading

angular

angular-aot