Javascript 实现延迟加载功能模块8时出现问题

因此，基本上，我正在尝试在我一直遵循的应用程序中创建一个延迟加载的功能模块——但由于某些原因，它不起作用

我已设置了功能模块仪表板模块，如下所示

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 {}

然后在我的仪表板布线模块中

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 {}

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 {}

因此，根据角度文档，这已正确设置

现在在我的批准模块中

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 {}

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 {}

但发生的事情是当我尝试去/仪表板。。我得到这个错误

Component HoldingPageComponent不是任何NgModule的一部分，或者该模块尚未导入到您的模块中。

但我很清楚地将其导入到仪表板模块中，如上图所示。。我做错了什么

谢谢

我不明白

RouterModule.forRoot

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

RouterModule.forChild

---

您需要确保组件在使用前已加载。在我看来，您似乎在其父模块之外的某个地方使用了

HoldingPageComponent

，或者导入不正确。请交叉检查。@Manish是的，我在另一个模块中导入了它，但我忘了删除它！谢谢，这很有效！我的AppRoutingModule不是我的根路由模块，因此forchild因此此处缺少sth仅在根应用程序模块AppModule中调用forRoot。在任何其他模块中调用它，特别是在延迟加载的模块中调用它，这与意图相反，并且可能会产生运行时错误。