如何在Angular库中使用loadChildren属性(惰性)定义路由?

时间:2019-09-17 10:50:58

标签: angular

我们有一个大型的Angular 8应用程序,我们希望将其分为几个部分(库)。我们希望每个库都定义自己的路由,而不会失去延迟加载功能。但是我们面临编译错误。

库路由模块:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'app1',
    loadChildren: () => import('./modules/demo/demo.module').then(m => m.DemoModule)
  },
  {
    path: '',
    redirectTo: 'app1',
    pathMatch: 'full',
  }
];

// @dynamic
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MyLibraryRoutingModule { }

这是我们遇到的第一个错误:

  

不支持Lambda

这就是我们添加// @dynamic标志的原因。但是然后我们得到了以下错误:

  

“错误:生成多个块时必须设置“ output.dir”而不是“ output.file”。“

我们不清楚要点。

我从Google员工那里发现this post,这表明我们做错了事...

任何人都可以确认并理想地解释为什么它绝对无法从库中定义惰性路由吗?

2 个答案:

答案 0 :(得分:2)

import { ApplicationModule } from './application.module';
...
export function getAppModule() {
    return ApplicationModule;
}
...
loadChildren: getAppModule 

答案 1 :(得分:0)

在更新版本的angular中,动态导入所提及的语法。但是无论如何,旧语法仍然可以在新版本的angular中使用。

尝试一下。

{
    path: '',
    loadChildren: './pages/home/home.module#HomeModule',
},

如果您想使用旧语法,请使用本文-> api specification