Lazy loading doesn't load the module - Angular 8

Question

I'm trying to lazy load my home page which includes a PrimeNG module (MenubarModule), but it is never loaded so I keep getting the error:

Error: Template parse errors:
'p-menubar' is not a known element:

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,

    PanelModule,
    InputTextModule,
    ButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

My app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: LoginComponent
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'home',
    component: HomeComponent,
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule) 
  }
];

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

My home.module.ts

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MenubarModule
  ]
})
export class HomeModule { }

@edit
If I put my MenubarModule in my app.module, it will work, but I want it to be lazy loaded inside my home.module

He is in my home.component.html If i put the MenuBarModule in my app..module, everithing work, but this isn't a lazy load, right? — M4ESTRO
– M4ESTRO, Commented Oct 4, 2019 at 18:26
I think you are not getting it. Can you create a stackblitz/plunkr for your problem? — Saksham
– Saksham, Commented Oct 4, 2019 at 18:27

Saksham · Accepted Answer · 2019-10-04 19:00:32Z

1

There are a few things you need to do in your stackblitz to fix the code

index.html should be

<body><app-root></app-root></body>

whereas you had some different entry tag than app-root

Also you need to remove all the references to your HomeComponent from the app module and app route module and add the forChild router definition in your Home Module as

RouterModule.forChild([{ path: "", component: HomeComponent }])

Working stackblitz at: https://stackblitz.com/edit/angular-fu9rx5

answered Oct 4, 2019 at 19:00

Saksham

9,4209 gold badges48 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

M4ESTRO Over a year ago

Many thanks! U solved it! Just one more thing, can u explain me, why it's working now? What i make wrong?

Manoj · Accepted Answer · 2019-10-04 21:07:04Z

If You are trying to lazy load, you should declare your child components in home.module.ts and define route in home-routing.module.ts then it will work.

From the above image admin.module.ts, it has two components as home and settings now lets see the admin-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SettingsComponent } from './settings/settings.component';


export const AdminRoutes: Routes = [{
  path: '',
  children: [
    { path: 'home', component: HomeComponent },
    { path: 'settings', component: SettingsComponent }]
}];

and those AdminRoutes are imported to admin.module.ts and the components are declared in the following way.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutes } from './admin-routing.module';
import { HomeComponent } from './home/home.component';
import { SettingsComponent } from './settings/settings.component';
import { RouterModule } from '@angular/router';


@NgModule({
  declarations: [HomeComponent, SettingsComponent],
  imports: [
    CommonModule, RouterModule.forChild(AdminRoutes)
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AdminModule { }

and then you define it the lazy load in app-routing.module.ts it will work for good.

Mises · Accepted Answer · 2019-10-06 00:36:35Z

app.module.ts :

    @NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts:

const routes: Routes = [
  { path: 'home', loadChildren: () => import('./home/home.module').then(module => module.HomeModule)},
  { path: 'login', loadChildren: () => import('./login/login.module').then(login => login.LoginModule)}
];

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

app.component.html:

<a routerLink="/home">Home</a>
<br>
<a routerLink="/login">Login</a>

<router-outlet></router-outlet>

home.module.ts :

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    HomeRoutingModule
  ]
})
export class HomeModule { }

home-routing.module.ts

const routes: Routes = [
  { path: '', component: HomeComponent, children: [
     { path: 'some', component: SomeComponent }
  ]}
];

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

login.module.ts:

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule
  ]
})
export class LoginModule { }

login-routing.module.ts

const routes: Routes = [
  { path: '', component: LoginComponent, children: [
     { path: 'another', component: AnotherComponent }
  ]}
];

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

And now it have to work. Becouse of children: You can use in LoginComponent and HomeComponent a <router-outlet></router-outlet> dom element.

@M4ESTRO I did an mistake about bootstrap components in lazy loading modules i update answear. XD

Collectives™ on Stack Overflow

Lazy loading doesn't load the module - Angular 8

3 Answers 3

1 Comment

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Related