Angular 延迟加载多个 child 路由

Question

这是我真的不应该坚持的事情，但我并没有真正使用延迟加载超出每个模块的单个路由。

我有一个像这样的延迟加载模块：

const appRoutes: Routes = [
...other routes...
  { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
...other routes...            
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { initialNavigation: 'enabled', preloadingStrategy: PreloadAllModules });

指向具有 child 路由的模块：

export const routing: ModuleWithProviders = RouterModule.forChild([
    {
    path: '',
    component: RootComponent, pathMatch: 'full', canActivate: [AuthGuardAdmin],
        data: {
            title: 'Dashboard',
            meta: [{ name: 'description', content: 'Administration home screen. From here you have access to the configurable parts of the site.' }]
        },
    children: [
            { path: '', component: HomeComponent, data: { title: 'Dashboard' } },
            { path: 'home', component: HomeComponent, data: { title: 'Dashboard' } },
            { path: 'settings', component: SettingsComponent },
            { path: 'albums', component: AlbumComponent, data: { title: 'Album Management' } },
            { path: 'reviews-admin', component: ReviewAdminComponent, data: { title: 'Reviews' } },
            { path: 'users-admin', component: AlbumComponent, data: { title: 'Users' } },
            { path: 'roles-admin', component: RolesManagmentComponent, data: { title: 'Roles' } },
            { path: 'events-admin', component: EventsManagementComponent, data: { title: 'Events' } },
            { path: 'slider-management', component: SliderManagementComponent, data: { title: 'Slides' } },
            { path: 'galleries', component: GalleryComponent, data: { title: 'Galleries' } },
            { path: 'images', component: ImageFileComponent, data: { title: 'Images' } },
            { path: 'tags', component: TagsComponent, data: { title: 'Tags' } },
            { path: 'about-page', component: AboutPageComponent, data: { title: 'About Page' } },
            { path: 'faq-management', component: FaqManagementComponent, data: { title: 'FAQ Management' } },
            { path: 'blog-management', component: BlogManagementComponent, data: { title: 'Manage Blog Posts' } },
            { path: 'card-management', component: CardManagementComponent, data: { title: 'Manage front page cards' } }
        ]
    }
]);

问题是我无法到达 child 路线，例如dashboard/settings

这个模块是一个常规模块并且工作正常，但是我正在使用服务器端渲染并且有一些使用 window 的第 3 方组件，这导致我为任何包含 [=32= 的路由禁用 SSR ].

所以我的问题是，如何在惰性加载路线上 children？

提前致谢！

编辑：

我尝试将每个路径声明为带有仪表板模块的惰性模块，但是当我这样做时，我收到错误消息，即该组件不是 NgModule 的一部分，这显然是错误的，因为它是，所以我是遗漏了什么。如果我将惰性 child 组件添加到仪表板声明中，我会被告知它在 2 个模块中声明，如果我将其从一个模块中删除，我会被告知它在 none 中......现在拔掉我的头发XD

Answer 1

所以事实证明你不能使用 pathMatch：'full' 在根上，路由...

    path: '',
    component: RootComponent, pathMatch:'full', canActivate: [AuthGuardAdmin],
        data: {
            title: 'Dashboard',
            meta: [{ name: 'description', content: 'Administration home screen. From here you have access to the configurable parts of the site.' }]
    },
    children: [

      { path: '', component: HomeComponent, data: { title: 'Dashboard' } },
      { path: 'about-page', component: AboutPageComponent, canActivateChild: [AuthGuardAdmin] },
    ],
  },

变成了...

    path: '',
    component: RootComponent, canActivate: [AuthGuardAdmin],
        data: {
            title: 'Dashboard',
            meta: [{ name: 'description', content: 'Administration home screen. From here you have access to the configurable parts of the site.' }]
    },
    children: [

      { path: '', component: HomeComponent, data: { title: 'Dashboard' } },
      { path: 'about-page', component: AboutPageComponent, canActivateChild: [AuthGuardAdmin] },
    ],
  },

Angular 延迟加载多个 child 路由

Angular Lazy loading with multiple child routes

lazy-loading

angular-routing

angular