带有子路由的Angular 8延迟加载

Question

我正在编写一个 Angular 8 应用程序，我正在尝试延迟加载一些模块。但是，当页面加载时，我收到此错误：

错误：组件 ProfileComponent 不是任何 NgModule 或 模块尚未导入到您的模块中。

具体来说，我希望在命中路由并加载组件时加载模块。问题是组件是模块的一部分。

这是子模块的代码，其中定义了组件：

@NgModule({
  imports: [],
  declarations: [
    ...
    ProfileComponent
  ],
  exports: [
    ...
    ProfileComponent
  ]
 })
 export class ProfileModule { }

这是试图动态加载子模块的父模块中的路由定义：

const routes: Routes = [
  {
   path: 'projects/profile/:id', component: ProfileComponent,  
     loadChildren: () => {
       return import('./profile/profile.module').then(m => m.ProfileModule);
     },
     children: [
       { path: 'list/:id', component: ListComponent, outlet: 'sidebar' },
       { path: 'risk/:id', component: RiskComponent, outlet: 'sidebar' },
       ...
   ]
 }

有没有办法在导航时加载组件和模块？我尝试将有问题的 ProfileComponent 移动到父模块中，但是当我导航到页面时，它希望它的所有子组件都存在（这与延迟加载相反）。我可以创建一个不使用子组件的登录页面，我可以在其中单击以重定向到动态加载子模块的路由，但我宁愿不向应用程序添加另一层单击。

Answer 1

为什么不在父模块中使用

const routes: Routes [{path:'projects/profile/:id', loadchildren: './profile/profile.module#ProfileModule']

然后在子模块中

const subRoutes: Routes .....
@NgModule({
imports: [RouterModule.forChild(subRoutes)]
exports: [RouterModule]

更多信息您可以查看Angular Routing & Navigation => Milestone 3: Heroes feature

希望这会有所帮助；-)

Answer 2

应用的结构：

├── parent.module.ts/
│   ├── profile.module.ts/
│       └──profile.component.ts/

• 如果配置文件模块尚未加载，则配置文件组件在父模块的上下文中不存在，因此您收到错误消息“模块尚未导入您的模块”。

如果我没有误解你的问题，你应该像这样在 ProfileModule 中声明另一组路由：

ProfileModule（非父模块）

const routes: Routes = [
   { path: '', component: ProfileComponent }, // /projects/profile/1
   { path: 'list/:id', component: ListComponent, outlet: 'sidebar' }, // /projects/profile/1/list/15 
   { path: 'risk/:id', component: RiskComponent, outlet: 'sidebar' } ///projects/profile/1/risk/20
]

//and then import it into your parent module RouterModule

@NgModule({
  declarations: [ProfileComponent],
  imports: [ RouteModule.forChild(routes) ],
  exports: [ RouterModule ]
})

ParentModule - 移除 ProfileComponent

const routes: Routes = [
  {
   path: 'projects/profile/:id', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule)
  }
]

在 Angular 8 中使用 import 关键字进行延迟加载是正确的，因为字符串语法 has been deprecated 但您可以通过删除 return 关键字来减少冗长。