Question

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

此组件是我的AppModule路由的一部分，因为我使用此路由登录到应用程序。直到我单击“激活邮件库”路由，所有路由都可以正常工作，然后引发引用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}
];

SubModule

//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

在路由配置中包含一个组件不足以使其在您的应用程序中可用。

您还需要通过将其包含在声明数组中，将其添加到将使用该模块的模块中。

如果要在AppModule上使用它，可以在AppModule的声明数组中包括LoginComponent。如果要在其他模块上使用它，请将其包含在另一个模块中。

如果要在一个以上的模块上使用同一组件，则可以将其包含在一个模块的声明和导出数组中，以便其他模块可以使用。

Answer 2

因为您这样定义routingComponents：

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

在AppModule数组中使用它时，必须像这样declarations进行传播。

尝试一下：

...routingComponents

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

2 个答案: