Angular 角度7:-延迟加载路由问题

我正在实现延迟加载 下面是相同的问题解决方案，我正在实现相同的解决方案，但再次出现错误。 我从project module导出了组件，并在app.module.ts中导入了project module

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

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

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

下面是我的主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 { }

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

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

下面是我的另一个模块文件project.module.ts。我正在为那个模块设置懒惰的loaidng

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

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

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

下面是我的应用程序路由模块，我正在其中加载项目模块 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>)

---

由于您正在懒洋洋地加载

ProjectModule

，因此无需将此模块导入

AppModule

，这可能会导致冲突

app.module.ts

---

您不需要在

AppModule

中导入

ProjectModule

，因为您需要延迟加载它。