Issue
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
Solution
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 By - Saksham
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.