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/… — Rakesh Chand
– Rakesh Chand, Commented Feb 6, 2018 at 10:33
@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
– Jeremy, Commented Feb 6, 2018 at 10:35
@Rakeschand Do I have to put my components into a seperate folder? — Jeremy
– Jeremy, Commented Feb 6, 2018 at 10:36
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 — Rakesh Chand
– Rakesh Chand, Commented Feb 6, 2018 at 10:37
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 — Rakesh Chand
– Rakesh Chand, Commented Feb 6, 2018 at 10:38

HDJEMAI · Accepted Answer · 2020-08-16 21:39:33Z

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

Collectives™ on Stack Overflow

Angular 4 Lazy Loading Not Loading Component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related