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']

，然后进入subModule

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: '', redirectTo: 'profile', pathMatch: 'full' },
   { path: 'profile', component: ProfileComponent }
]

//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),
      children: [
        { path: 'list/:id', component: ListComponent, outlet: 'sidebar' },
        { path: 'risk/:id', component: RiskComponent, outlet: 'sidebar' },
      ]
  }
]

在Angular 8中使用import关键字进行延迟加载是正确的。请保留它，但是可以通过删除return关键字来使其更简洁。请注意，字符串语法已被弃用，并将在Angular 11 loadChildren string syntax

中暂时删除。

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

2 个答案: