Angular 4 Lazy Loading Not Loading Component

Question

I'm working on an app that displays a form and a list of users. I'm trying to lazy load both of these modules via 2 buttons but the components do not load. I can see form.module.chunk.js and people.module.chunk.js in the network tab in my google developer tools, so the modules are being loaded. I don't have any subfolders in /form or /people if that might be the problem

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

Then in the module itself I declared the component

declarations: [PeopleComponent]

and finally this is the code for the routing module

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

I'd be happy about any sort of advise

what error do you get in console while you click to people route, here's a answer of mine on lazy load please look at it, see what wrong are you doing stackoverflow.com/questions/48554772/… — Rakeschand
@Rakeschand Uncaught (in promise): Error: Type FormComponent is part of the declarations of 2 modules: AppModule and FormModule! Please consider moving FormComponent to a higher module that imports AppModule and FormModule. You can also create a new NgModule that exports and includes FormComponent then import that NgModule in AppModule and FormModule. Error: Type FormComponent is part of the declarations of 2 modules: AppModule and FormModule! Please consider moving FormComponent to a higher module that imports AppModule and FormModule. — Jeremy Püringer
@Rakeschand Do I have to put my components into a seperate folder? — Jeremy Püringer
that's right, your lazy loaded component should only be declared in the lazy loaded module. but if you need to import one component in multiple places than there is different way — Rakeschand
No Jeremy, not the folders, it's not about folder, it's about declarations, declarations: [PeopleComponent] this PeopleComponent should be in declarations of one module — Rakeschand

Rakeschand Rakeschand · Accepted Answer · 2018-02-06T10:43:54

This is your app.module.ts, I am also including the routing with this.

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

No when you define your people module, you don't include PeopleComponent in AppModule but in 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 { }

Same goes for your all lazyily loaded modules. See the other answer of mine here RangeError: Maximum call stack size exceeded Angular 5 Router

For error you mentioned in comments: remove FormComponent from AppModule

Angular 4 Lazy Loading Not Loading Component

1 Answers