Javascript 无法使用库中嵌套的延迟加载模块构建angular 8应用程序
我正在使用angular创建一个ui库。 在工作区中,有一个用于主应用程序的项目,一个用于ui库的项目 在声明模块和路由的库中,我有以下代码: 父路由.module.ts:Javascript 无法使用库中嵌套的延迟加载模块构建angular 8应用程序,javascript,angular,typescript,angular8,Javascript,Angular,Typescript,Angular8,我正在使用angular创建一个ui库。 在工作区中,有一个用于主应用程序的项目,一个用于ui库的项目 在声明模块和路由的库中,我有以下代码: 父路由.module.ts: import {NgModule} from '@angular/core'; import {RouterModule, Routes} from '@angular/router'; import {ParentComponent} from './parent.component'; const routes: Ro
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中出错
找不到模块:错误:无法在“/Users/linhnguyen/nested Module playway/projects/main app/src/app”中解析“../../../../../../../../ui lib/modules/parent/parent.Module.d.ngfactory”
在谷歌上搜索后,我找到了。评论员提到创建模块并将每个组件导入路由。这可以解决在库中加载模块的问题,但不是延迟加载
这是
有人有什么解决办法吗
谢谢
更新 在我的
主应用程序中
声明了父组件和子组件的包装器模块,如下所示:
const routes: Routes = [
{
path: '',
loadChildren: () => import('ui-lib').then(m => m.ParentModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
- child-wrapper.module.ts
- parent-wrapper.module.ts:
- app-routing.module.ts
ui库时,他们必须在应用程序中重新声明路由
有更好的主意吗
loadChildren: '/child/child.module#ChildModule'
需要使用新的Angular 8导入语法
loadChildren: () => import('/child/child.module').then(m => m.ChildModule)
不确定是否可以延迟加载使用旧的pre Angular 8语法构建的模块。在我的项目中实现此功能时,我也面临同样的问题。我在angular 6中实现了它。我认为谷歌评论中给出的建议解决方案是正确的。在主应用程序中,您必须创建一个包装器模块,例如libwrapper
module,它将只导入库模块。在路径声明的app.module.ts中,您可以参考libwrapper
module,这将解决您的问题。Hipe这很有帮助。我已经尝试使用包装器模块,但它似乎不能像上面那样使用嵌套模块。或者我做错了吗?从发布的场景中,我将假设childModule是ui库的一部分,作为一个整体,它被懒洋洋地加载到主应用程序中。您能证明您在主应用程序中创建的包装器模块吗?src已在上述问题中更新。您可以看一看:)我同意在实现父库的应用程序中重新声明路由似乎是错误的。你有没有为此找到工作?
loadChildren: '/child/child.module#ChildModule'
loadChildren: () => import('/child/child.module').then(m => m.ChildModule)