难以实现延迟加载的功能模块Angular 8

Question

所以基本上我正在尝试在我一直关注the official angular docs 的应用程序中创建一个延迟加载的功能模块 - 但由于某种原因它无法正常工作。

我的功能模块DashboardModule如下图所示

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// MODULES
import { DashboardRoutingModule } from './dashboard-routing.module';

// COMPONENTS
import { DashboardComponent } from './dashboard/dashboard.component';
import { DashboardAlertComponent } from './dashboard-alert/dashboard-alert.component';
import { DashboardSummaryComponent } from './dashboard-summary/dashboard-summary.component';
import { DashboardTasksComponent } from './dashboard-tasks/dashboard-tasks.component';
import { HoldingPageComponent } from './holding-page/holding-page.component';

@NgModule({
    imports: [CommonModule, DashboardRoutingModule],
    declarations: [
        DashboardComponent,
        DashboardAlertComponent,
        DashboardSummaryComponent,
        DashboardTasksComponent,
        HoldingPageComponent,
    ]
})
export class DashboardModule {}

然后在我的 DashboardRoutingModule

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { ActivityComponent } from '../activity-components/activity/activity.component';
import { IsLockedRouteGuard } from '@app/shared/common/auth/is-locked-route-guard';
import { DashboardSummaryComponent } from './dashboard-summary/dashboard-summary.component';
import { SyncComponent } from '@app/popup-components/sync/sync.component';
import { DashboardAlertComponent } from './dashboard-alert/dashboard-alert.component';
import { ChartContainerComponent } from '../chart-components/chart-container/chart-container.component';
import { DashboardTasksComponent } from './dashboard-tasks/dashboard-tasks.component';


@NgModule({
    imports: [
        RouterModule.forChild([
            { path: 'activity', component: ActivityComponent, canActivate: [IsLockedRouteGuard] },
            { path: 'snapshot', component: DashboardSummaryComponent },
            { path: 'sync', component: SyncComponent },
            {
                path: 'alerts',
                component: DashboardAlertComponent,
                canActivate: [IsLockedRouteGuard]
            },
            { path: 'charts', component: ChartContainerComponent, canActivate: [IsLockedRouteGuard] },
            { path: 'tasks/:sort', component: DashboardTasksComponent, canActivate: [IsLockedRouteGuard] },
        ])
    ],
    exports: [RouterModule]
})
export class DashboardRoutingModule {}

所以根据角度文档，这已正确设置..

现在在我的 AppRoutingModule

中

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRouteGuard } from './shared/common/auth/auth-route-guard';

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: 'app',
                component: AppComponent,
                children: [
                    {
                        path: '',
                        children: [{ path: '', redirectTo: '/dashboard/alerts', pathMatch: 'full' }]
                    },
                    {
                        path: 'main',
                        canActivate: [AppRouteGuard],
                        loadChildren: () => import('./main/main.module').then(m => m.MainModule),
                        data: { preload: true }
                    },
                    {
                        path: 'dashboard',
                        loadChildren: () => import('./main/dashboard/dashboard.module').then(m => m.DashboardModule)
                    },
                ]
            }
        ])
    ],
    exports: [RouterModule]
})
export class AppRoutingModule {}

但是当我尝试转到 /dashboard 时发生了什么。我收到此错误

Component HoldingPageComponent is not part of any NgModule or the module has not been imported into your module.

但我显然将其导入到 DashboardModule 中，如上所示。我做错了什么？？

谢谢

Answer 1

我没看到

RouterModule.forRoot

我认为你应该在 AppRoutingModule 中使用它而不是

RouterModule.forChild