ionic angular 中的嵌套路由

Question

我正在使用 Ionic 4

我在具有以下继承人的页面中构建了我的应用程序

| app
  |- tabs
     |- tabs.page.ts
     |- tabs.module.ts
     |- tabs.routing.module.ts
  |- pages
     |- profile
        |- profile
           |- profile.module.ts
           |- profile.page.ts
        |- profile.module.ts
        |- profile-routing.module.ts
     |- pages.module.ts
     |- pages-routing.module.ts
  |- app.component.ts
  |- app.module.ts
  |- app-routing.module.ts

app-routing.module.ts

的内容

const routes: Routes = [
  { path: '', redirectTo: 'tabs', pathMatch: 'full'},
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule', canActivate: [AuthGuardService]},
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

然后，制表符。routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    loadChildren: '../pages/pages.module#PagesModule'
  }
];

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

进一步加载 PagesModule 和 pages-routing.module.ts

的内容

const routes: Routes = [
    { path: '', redirectTo: 'profile', pathMatch: 'full'},
    { path: 'profile', loadChildren: './profile/profile.module#ProfileModule'},
];
@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})
export class PagesRoutingModule {}

和个人资料的内容-routing.module.ts

const routes: Routes = [
    { path: '', loadChildren: './profile/profile.module#ProfilePageModule'},
];
@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})
export class ProfileRoutingModule {}

但在访问时

/tabs/profile

它给出的错误为

错误错误：“未捕获（承诺）：错误：在'./profile/profile.module'

中找不到'ProfilePageModule'

正在替换 { path: '', loadChildren: './profile/profile.module#ProfilePageModule'}, in profile-routing.module.ts 与 { 路径：''，组件：ProfilePage} 正在工作。

Answer 1

为什么您的配置文件目录中有两个 "profile.module.ts" 文件？当您延迟加载时，请确保您的 loadChildren 路径指向其中包含 "ProfilePageModule" 导出的文件，鉴于您的错误我假设您指向不正确的 "profile.module.ts"

我会说 { path: '', component: ProfilePage} 正在工作，因为它正在急切地加载，没有演示项目来审查很难说的代码，但你试过了吗：

const routes: Routes = [
    { path: '', loadChildren: './profile.module#ProfilePageModule'},
];
@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})
export class ProfileRoutingModule {}

ionic angular 中的嵌套路由

nested routing in ionic angular

angular-routing

angular