Angular2 – “router-outlet”不是已知的元素
我创build了深度子path的路线。 我将<router-outlet>添加到了包装到NgModule中的AdminComponent组件。 但刷新页面后，我得到这个错误：
'router-outlet' is not a known element
也许这是因为我忘了导入一些模块到admin.module.ts
请帮忙。 谢谢。
app.routes.ts
export const routes: Routes = [ { path: '', component: AppComponent, children: [ { path: '', component: LoginComponent }, { path: 'admin', component: AdminComponent }, { path: 'user', component: UserComponent }, { path: 'there', component: ThereComponent } ] } ]
app.module.ts
@NgModule({ imports: [ BrowserModule, AppRoutes, FormsModule, ReactiveFormsModule, HttpModule, RouterModule, TranslateModule.forRoot({ provide: TranslateLoader, useFactory: (http: Http) => { return new TranslateStaticLoader(http, './src/assets/i18n', '.json') }, deps: [Http] }), UserComponentModule, AdminComponentModule, LoginComponentModule, ThereComponentModule, DashboardComponentModule ], declarations: [ AppComponent ], providers: [ FormBuilder ], bootstrap: [AppComponent] })
admin.component.ts和admin.module.ts
// admin.component.ts import {Component} from "@angular/core"; @Component({ selector: 'admin', template: "<router-outlet></router-outlet>", }) export class AdminComponent { constructor() { } } // admin.module.ts const ADMIN_DECLARATION = [ AdminComponent ]; @NgModule({ imports: [ BrowserModule, TranslateModule, FormsModule, ReactiveFormsModule ], declarations: [ ADMIN_DECLARATION ], exports: [ ADMIN_DECLARATION ], providers: [ TranslateService, FormBuilder ] }) export class AdminComponentModule { }
AdminComponent是AdminComponent的一部分，并且您尚未在AdminComponentModule模块中导入RouterModule ：
// admin.component.ts import {Component} from "@angular/core"; @Component({ selector: 'admin', template: "<router-outlet></router-outlet>", }) export class AdminComponent { constructor() { } } // admin.module.ts const ADMIN_DECLARATION = [ AdminComponent ]; @NgModule({ imports: [ BrowserModule, TranslateModule, RouterModule, FormsModule, ReactiveFormsModule ], declarations: [ ADMIN_DECLARATION ], exports: [ ADMIN_DECLARATION ], providers: [ TranslateService, FormBuilder ] }) export class AdminComponentModule { }
你没有导出RouterModule。
@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] })
添加此代码
import { provideRoutes} from '@angular/router';
到你的app.module.ts
为我工作。
在你的app.module.ts文件中
import { routing } from './app-routing.module'; //and then write within imports @NgModule({ declarations: [ AppComponent, NavbarComponent ], imports: [ BrowserModule, **routing**, EmployeeModule ],
