The structure of my app is:
- src
- dashboard(main component)
- department(child component)
add(sub child component)
const r: Routes = [
{ path: "", redirectTo:'/dashboard' ,pathMatch: 'full'},
{ path: "dashboard", component: DashboardComponent, loadChildren:'./dashboard/dashboard.module#DashboardModule' },
{ path: "Top-nav", component: TopNavComponent },
{ path: "boxed", component: BoxedComponent },
{ path: "fixed", component: FixedComponent },
{ path: "collapse", component: CollapsedSidebarComponent },
];
In app.module.ts, I added RouterModule.forRoot(r),
Here is code for dashboard.routing.module:
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent, children: [
{ path: "", component: LoginComponent },
{ path: "Calender", component: CalenderComponent },
{ path: "MailBox", component: MailBoxComponent },
{ path: "compose", component: ComposeComponent },
{ path: "Read", component: ReadMailComponent },
{ path: "tables", component: TablesComponent },
{ path: "simpleTables", component: SimpleTablesComponent },
{ path: "dataTables", component: DataTablesComponent },
{ path: "register", component: RegisterComponent },
{ path: "dash-panel", component: DashboardPanelComponent },
{path : 'department', component: DepartmentComponent}
]
}
];
@NgModule({
imports: [
RouterModule.forChild(routes),
FormsModule,
ReactiveFormsModule,
],
Here is for department.routing.module
const routes: Routes = [
{ path: "", redirectTo: "department", pathMatch: 'full' },
{
path: "department", component: DepartmentComponent,
children: [
{ path: 'add', component: AddComponent },
{ path: 'edit/:id', component: AddComponent },
{ path: 'view/:id', component: ViewComponent },
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
If I render htttp:localhost:4200/dashboard/department, it works fine but if I render htttp:localhost:4200/dashboard/department/add, i am getting error as:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Component DashboardComponent is not part of any NgModule or the module has not been imported into your module.
Error: Component DashboardComponent is not part of any NgModule or the module has not been imported into your module.
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._createCompiledHostTemplate (compiler.js:23968)
at compiler.js:23944
at Array.forEach (<anonymous>)
at compiler.js:23941
at Array.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23930)
at compiler.js:23858
at Object.then (compiler.js:1012)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:23817)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._createCompiledHostTemplate (compiler.js:23968)
at compiler.js:23944
at Array.forEach (<anonymous>)
at compiler.js:23941
at Array.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23930)
at compiler.js:23858
at Object.then (compiler.js:1012)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:23817)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3811)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)