CODEWITHSUNDEEP
angularrouteslazy-loadingangular8angular-routing
M4ESTRO
M4ESTRO

Reputation: 13

Lazy loading doesn't load the module - Angular 8

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

Upvotes: 1

Views: 2674

Answers (3)

Mises
Mises

Reputation: 4603

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.

Upvotes: 0

Manoj
Manoj

Reputation: 712

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.

enter image description here

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.

Upvotes: 0

Saksham
Saksham

Reputation: 9380

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

Upvotes: 1

Related Questions