Ошибка компонентов родительского модуля при переходе к подмодулю Lazy Loaded Route - PullRequest
Новая
       10

Ошибка компонентов родительского модуля при переходе к подмодулю Lazy Loaded Route

0 голосов
/ 16 ноября 2018

У меня есть базовый AppModule, который обрабатывает маршруты для этого модуля, затем у меня есть подмодуль со своим собственным <router-outlet></router-outlet>, который я использую для создания мастера. Все маршруты в AppModule работают так, как задумано, но когда я пытаюсь «лениво» загрузить мой модуль мастера, я получаю сообщение об ошибке «Ошибка: компонент LoginComponent не является частью какого-либо модуля NgModule или модуль не был импортирован в ваш модуль».

Этот компонент является частью моей маршрутизации AppModule, так как я использую этот маршрут для входа в приложение. Вся маршрутизация работает нормально до тех пор, пока я не нажму на маршрут «activ-mail-base», затем выдает ошибку, ссылающуюся на компонент LoginComponent. Я полагаю, что кодирую это в спецификации документации, но, очевидно, что-то упущено.

SubModule Routing 

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

1 Ответ

0 голосов
/ 16 ноября 2018

Поскольку вы определили routingComponents следующим образом: 

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

И в вашем AppModule вы используете его в массиве declarations, вам придется распространять его следующим образом (...routingComponents).

Попробуйте: 

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

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