我的应用程序的结构是:
添加(子子组件)
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 },
];
在app.module.ts中,我添加了RouterModule.forRoot(r), 这是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,
],
这里是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]
})
如果我渲染htttp:localhost:4200 / dashboard / department,效果很好,但是如果我渲染htttp:localhost:4200 / dashboard / department / add,我得到的错误是:
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)