Angular 4延迟加载不加载组件

Question

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

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

所有延迟加载的模块也是如此。在这里查看我的另一个答案 RangeError: Maximum call stack size exceeded Angular 5 Router

对于您在评论中提到的错误:从 AppModule 中删除 FormComponent