Angular7: - проблема маршрутизации отложенной загрузки - PullRequest
Новая
       9

Angular7: - проблема маршрутизации отложенной загрузки

2 голосов
/ 07 марта 2019

Я выполняю отложенную загрузку Ниже то же самое решение проблемы, и я реализую то же самое, но снова получаю ошибку. Ошибка отложенной загрузки на вопросе stackoverflow Я экспортировал компоненты из модуля проекта и импортировал модуль проекта в app.module.ts

Ниже приведен мой основной файл app.module.ts

App.module.ts 

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { DashComponent } from './dash/dash.component';
    import { FourzerofourComponent } from './fourzerofour/fourzerofour.component';
import { ProjectModule } from './project/project.module';

    @NgModule({
      declarations: [
        AppComponent,
        DashComponent,
        FourzerofourComponent,


      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        ProjectModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Ниже приведен мой другой файл модуля, который является project.module.ts. Я настраиваю lazy loaidng для этого модуля

Project.module.ts 

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

import { ProjectRoutingModule } from './project-routing.module';
import { ProjectComponent } from './project.component';
import { ProjectListComponent } from './project-list/project-list.component';
import { ProjectDetailsComponent } from './project-details/project-details.component';

@NgModule({
  declarations: [ProjectComponent, ProjectListComponent, ProjectDetailsComponent],
  imports: [
    CommonModule,
    ProjectRoutingModule
  ],
  exports: [ProjectComponent, ProjectListComponent, ProjectDetailsComponent]
})
export class ProjectModule { }

Ниже мой модуль app-routing, куда я загружаю в него модуль проекта App-module.routing.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashComponent } from './dash/dash.component';
import { FourzerofourComponent } from './fourzerofour/fourzerofour.component';



const appRoutes: Routes = [
 {
   path:'dash',
   component:DashComponent
 },
 {
  path:'projects',
  loadChildren:'./project/project.module#ProjectModule'
},

 {
   path: '',
   redirectTo: '/dash',
   pathMatch: 'full'
 }, 
 {
   path:"**",
   component:FourzerofourComponent
 }






];  




@NgModule({
  imports: [RouterModule.forRoot(appRoutes) ],
  exports: [RouterModule]
})
export class AppRoutingModule {

 }

Я получаю ошибку 

core.js:15723 ERROR Error: Uncaught (in promise): Error: Component ProjectComponent is not part of any NgModule or the module has not been imported into your module.
Error: Component ProjectComponent is not part of any NgModule or the module has not been imported into your module.
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._createCompiledHostTemplate (compiler.js:26121)
    at compiler.js:26097
    at Array.forEach (<anonymous>)

проект-routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ProjectComponent} from './project/project.component';
import {ProjectListComponent} from './project-list/project-list.component';
import {ProjectDetailsComponent} from './project-details/project-details.component';


const projectRoutes: Routes = [

{ 
  path: '',
  component:ProjectComponent,
  children:[
    {
      path:'',
      component:ProjectListComponent
    }, {
      path: ':id',
      component:ProjectDetailsComponent
    }
  ]
}

];

@NgModule({
  imports: [RouterModule.forChild(projectRoutes)],
  exports: [RouterModule]
})
export class ProjectRoutingModule { }

1 Ответ

1 голос
/ 07 марта 2019

Поскольку вы лениво загружаете ProjectModule, нет необходимости импортировать этот модуль в AppModule, что, вероятно, вызывает конфликт.

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DashComponent } from './dash/dash.component';
import { FourzerofourComponent } from './fourzerofour/fourzerofour.component';

@NgModule({
  declarations: [
     AppComponent,
     DashComponent,
     FourzerofourComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
...