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 });

哪个指向具有子路由的模块：

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' } }
        ]
    }
]);

问题是我无法到达子路线，例如仪表板/设置

该模块是常规模块，可以正常工作，但是我正在使用服务器端渲染，并且有一些使用window的第三方组件，这使我无法对任何包含“仪表板”的路由禁用SSR。

所以我的问题是，如何在懒惰的路线上生孩子？

谢谢！

编辑：

我尝试将每个路径声明为带有仪表板模块的惰性模块，但是当我这样做时，我得到一个错误，即该组件不是NgModule的一部分，这显然是错误的，因为它是错误的，所以我缺少了一些东西。如果我将惰性子组件添加到仪表板声明中，则被告知在2个模块中声明了该子组件，如果我将其从一个模块中删除，则被告知该组件不存在。...现在将头发拉出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] },
    ],
  },

有多个子路径的角延迟加载

1 个答案: