无法在库中使用嵌套的延迟加载模块构建 angular 8 应用程序

Question

我正在使用 angular 创建一个ui 库。在工作区中，主 app 有一个项目，ui 库有一个项目。

在声明模块和路由的库中，我有以下代码：

parent-routing.module.ts：

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

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

import {ParentComponent} from './parent.component';

const routes: Routes = [

  {

    path: '',

    component: ParentComponent,

    children: [

      {

        path: '',

        loadChildren: '/child/child.module#ChildModule'

      }

    ]

  }

];

@NgModule({

  imports: [

    RouterModule.forChild(routes)

  ],

  exports: [

    RouterModule

  ]

})

export class ParentRoutingModule {

}

在app.module.ts 中，我声明ParentModule如下：

const routes: Routes = [

  {

    path: '',

    loadChildren: () => import('ui-lib').then(m => m.ParentModule)

  }

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

当我尝试编译我的应用程序时，控制台向我抛出一个错误：

./src/app/app-routing.module.ts 中的错误找不到模块：错误：无法解析 './../../../../dist/ui-lib/modules/parent/ '/Users/linhnguyen/nested-module-playground/projects/main-app/src/app' 中的 parent.module.d.ngfactory'

在谷歌上搜索后，我找到了这条评论。评论者提到创建一个模块并将每个组件导入到路由中。这样可以解决库中加载模块的问题，但不是懒加载。

请问有人有任何解决方案吗？

Answer 1

loadChildren: '/child/child.module#ChildModule'需要采用新的 Angular 8 导入语法loadChildren: () => import('/child/child.module').then(m => m.ChildModule)不确定您是否可以延迟加载使用旧的 pre Angular 8 语法构建的模块。

Answer 2

在我的项目中实现此功能时，我也遇到了同样的问题。不过，我在 angular 6 中实现了它。我认为谷歌评论中给出的推荐解决方案是正确的。在您的主应用程序中，您必须创建一个包装模块，例如libwrapper只会导入库模块的模块。在 app.module.ts 的路由声明中，您可以引用libwrapper模块，这应该可以解决您的问题。嗨，这有帮助..