Angular 4延迟加载未加载组件答案

【问题标题】：Angular 4 Lazy Loading Not Loading ComponentAngular 4延迟加载未加载组件
【发布时间】：2018-02-06 10:05:17
【问题描述】：

我正在开发一个显示表单和用户列表的应用程序。我试图通过 2 个按钮延迟加载这两个模块，但组件不加载。我可以在我的谷歌开发工具的网络选项卡中看到 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 { }

如果有任何建议，我都会很高兴

【问题讨论】：

点击人员路线时控制台出现什么错误，这是我关于延迟加载的答案，请看一下，看看你在做什么stackoverflow.com/questions/48554772/…
@Rakeschand Uncaught (in promise)：错误：FormComponent 类型是 2 个模块声明的一部分：AppModule 和 FormModule！请考虑将 FormComponent 移至导入 AppModule 和 FormModule 的更高模块。您还可以创建一个新的 NgModule，它导出并包含 FormComponent，然后在 AppModule 和 FormModule 中导入该 NgModule。错误：FormComponent 类型是 2 个模块声明的一部分：AppModule 和 FormModule！请考虑将 FormComponent 移至导入 AppModule 和 FormModule 的更高模块。
@Rakeschand 我是否必须将组件放入单独的文件夹中？
没错，你的懒加载组件应该只在懒加载模块中声明。但是如果您需要在多个地方导入一个组件，则有不同的方法
不是 Jeremy，不是文件夹，不是文件夹，而是声明，declarations: [PeopleComponent] 这个PeopleComponent 应该在一个模块的declarations 中

标签： angular typescript lazy-loading

【解决方案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 { }

不，当您定义人员模块时，您不会将 PeopleComponent 包含在 AppModule 中，而是包含在 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

对于您在 cmets 中提到的错误：从 AppModule 中删除 FormComponent

【讨论】：