导航到子模块延迟加载的路由时出现父模块组件错误

Question

我有一个基本的 AppModule 来处理该模块的路由，然后我有一个子模块，它有自己的 <router-outlet></router-outlet> 用于构建向导。 AppModule 中的所有路由都按设计工作，但是当我尝试“延迟加载”我的向导模块时，我收到错误“错误：组件 LoginComponent 不是任何 NgModule 的一部分或模块尚未导入您的模块。”

此组件是我的 AppModule 路由的一部分，因为我使用此路由登录到应用程序。在我单击“activate-mail-base”路由之前，所有路由都可以正常工作，然后它会引发引用 LoginComponent 的错误。我相信我正在根据文档规范对此进行编码，但显然遗漏了一些东西。

子模块路由

//wizard.routing.module
import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';
//Component Imports
import { ActivateMailBaseComponent } from './activate-mail-base/activate-mail-base.component';
import { ActivateMailStep1Component } from './activate-mail-step1/activate-mail-step1.component';
import { ActivateMailStep2Component } from './activate-mail-step2/activate-mail-step2.component';
import { ActivateMailStep3Component } from './activate-mail-step3/activate-mail-step3.component';
import { ActivateMailStep4Component } from './activate-mail-step4/activate-mail-step4.component';
import { ActivateMailStep5Component } from './activate-mail-step5/activate-mail-step5.component';

export const activateMailRoutes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'activate-mail-1' },
  { path: 'activate-mail-1', component: ActivateMailStep1Component},
  { path: 'activate-mail-2', component: ActivateMailStep2Component},
  { path: 'activate-mail-3', component: ActivateMailStep3Component},
  { path: 'activate-mail-4', component: ActivateMailStep4Component},
  { path: 'activate-mail-5', component: ActivateMailStep5Component}
];

子模块

//activate-mailorder-module.module
import { NgModule, ModuleWithProviders } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';

import { LeftRailModule } from '../../leftRailComponent/left-rail.module'; //This contains router links
import { activateMailRoutes } from './wizard.routing.module';


@NgModule({
  imports: [
CommonModule,
RouterModule.forChild(activateMailRoutes),
LeftRailModule
  ],
  declarations: []
})
export class ActivateMailorderModuleModule {}

这是 AppModuleRouting

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule, CanActivate } from '@angular/router';
import { LoginComponent } from './loginComponent/login.component';
import { CreateFormComponent } from './Campaigns/createForm/createForm.component';
import { NotFoundComponent } from './Interceptors/not-found/not-found.component';

const routes: Routes = [
  { path: 'activate-mail-base', loadChildren: './MYPATH/activateMemberMailorder/activate-mailorder-module.module#ActivateMailorderModuleModule'},
  { path: '', pathMatch: 'full', redirectTo: '/login' },
  { path: 'login', component: LoginComponent },
  { path: 'create-form', component: CreateFormComponent },
  { path: 'not-found', component: NotFoundComponent},
  { path: '**', redirectTo: 'not-found'}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes,{ enableTracing: true })
  ],
  declarations: [],
  exports: [RouterModule, CommonModule],
})
export class AppRoutingModule { }

export const routingComponents = [LoginComponent, CreateFormComponent, NotFoundComponent];

导入 AppModule - ABRV For Space

//Routing
import { AppRoutingModule, routingComponents } from './routing.module';
@ngModule({
  declarations: [
      AppComponent,
      routingComponents
    ],
    imports: [
      BrowserModule,
      ReactiveFormsModule,
      BrowserAnimationsModule,
      FormsModule,
      HttpModule,
      AppRoutingModule,
      MomentModule,
      LeftRailModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

Answer 1

既然你这样定义routingComponents：

export const routingComponents = [LoginComponent, CreateFormComponent, NotFoundComponent];

在你的AppModule 中，你在declarations 数组中使用它，你必须像这样传播它(...routingComponents)。

试试这个：

import { AppRoutingModule, routingComponents } from './routing.module';

@NgModule({
  declarations: [
    AppComponent,
    ...routingComponents
  ],
  ...
})
export class AppModule {}