Angular7:-延迟加载路由问题

时间:2019-03-07 00:04:25

标签: angular lazy-loading

我正在实现延迟加载 以下是相同的问题解决方案,我正在实施相同的解决方案,但再次出现错误。 Lazy loading error on stackoverflow question 我从项目模块中导出了组件,并在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。我正在为该模块设置懒惰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-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>)

project-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 个答案:

答案 0 :(得分:1)

由于您懒惰地加载glue,因此无需将此模块导入tmp <- tibble::tibble(firststring = c("GAD", "GAD2", "GAD3"), secondstring = c("AB1", "AB2", "AB3")) (tmp_new <- glue::glue_data(tmp, "{firststring} and {secondstring} went to the park for a walk. {firststring} forgot his keys.")) #> GAD and AB1 went to the park for a walk. GAD forgot his keys. #> GAD2 and AB2 went to the park for a walk. GAD2 forgot his keys. #> GAD3 and AB3 went to the park for a walk. GAD3 forgot his keys. (with(tmp, paste(firststring, "and", secondstring, "went to the park for a walk.", firststring, "forgot his keys."))) #> [1] "GAD and AB1 went to the park for a walk. GAD forgot his keys." #> [2] "GAD2 and AB2 went to the park for a walk. GAD2 forgot his keys." #> [3] "GAD3 and AB3 went to the park for a walk. GAD3 forgot his keys." ,这很可能引起冲突。

app.module.ts

ProjectModule