Angular 4 延迟加载未加载组件

Question

我正在开发一个显示表单和用户列表的应用程序。我试图通过 2 个按钮延迟加载这两个模块，但组件未加载。我可以在 google 开发人员工具的网络选项卡中看到 form.module.chunk.js 和 people.module.chunk.js，所以正在加载模块。如果这可能是问题所在，我在 /form 或 /people 中没有任何子文件夹

应用程序路由-module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MenuComponent } from './menu/menu.component';

const routes: Routes = [
{
path: 'people',
loadChildren: 'app/people/people.module#PeopleModule'
},
{
path: 'form',
loadChildren: 'app/form/form.module#FormModule'
},
{ path: 'menu', component: MenuComponent },
{ path: '', redirectTo: '/menu', pathMatch: 'full' }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
 })

export class AppRoutingModule { }

然后在模块本身中我声明了组件

declarations: [PeopleComponent]

最后是路由模块的代码

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PeopleComponent } from './people.component';

const routes: Routes = [
{
path: '',
component: PeopleComponent
}
];

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

我很乐意接受任何建议

Answer 1

这是你的app.module.ts，我也把路由包括在内。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes, ActivatedRoute, ParamMap } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

export const ROUTES: Routes = [
   { path: '', component: HomeComponent, pathMatch: 'full' },
   { path: 'people', loadChildren: 'app/people/people.module#PeopleModule' },
   { path: '**', redirectTo: ''}
];

@NgModule({
   declarations: [
      AppComponent,
      HomeComponent
   ],
  imports: [
     BrowserModule,
     RouterModule.forRoot(ROUTES),
     FormsModule,
     HttpModule,
     HttpClientModule
  ],
  providers: [ /*services*/ ],
  bootstrap: [AppComponent]
  })
  export class AppModule { }

不，当你定义你的人员模块时，你不会在 AppModule 中包含 PeopleComponent，而是在 PeopleModule 中

import { NgModule, ApplicationRef, APP_BOOTSTRAP_LISTENER, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { APP_BASE_HREF, CommonModule } from '@angular/common';
import { Http, HttpModule } from "@angular/http";
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';

import { PeopleComponent } from './people.component';

@NgModule({
    declarations: [
        PeopleComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        HttpModule,
        RouterModule.forChild([
            { path: '', component: PeopleComponent }
        ])
    ],
    providers : [
        //add services and other providers
    ],
    schemas: [ NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA ]
})

export class PeopleModule { }

所有延迟加载的模块也是如此。在这里查看我的另一个答案

对于您在评论中提到的错误：从 AppModule

中删除 FormComponent

Angular 4 延迟加载未加载组件

Angular 4 Lazy Loading Not Loading Component

lazy-loading

typescript

angular