Angular2 - 'router-outlet' is not a known element
AngularAngular2 RoutingAngular Problem Overview
I created routes with deep child paths. I added <router-outlet> to the AdminComponent component which I wrapped into NgModule. But after refreshing the page I got this error:
'router-outlet' is not a known element
Maybe it occurred because I forgot import some module to admin.module.ts
Please help. Thanks.
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 and 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 {
}
Angular Solutions
Solution 1 - Angular
AdminComponent is part of AdminComponentModule and you have not imported RouterModule inside AdminComponentModule module:
// 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 {
}
Solution 2 - Angular
you did not export the RouterModule.
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
Solution 3 - Angular
Add this code
import { provideRoutes} from '@angular/router';
to your app.module.ts
Worked for me.
Solution 4 - Angular
In your app.module.ts file
import { routing } from './app-routing.module';
//and then write within imports
@NgModule({
declarations: [
AppComponent,
NavbarComponent
],
imports: [
BrowserModule,
**routing**,
EmployeeModule
],
Solution 5 - Angular
This works for me:
Add schema [NO_ERRORS_SCHEMA] in AppModule.
import { NO_ERRORS_SCHEMA } from '@angular/core';
@NgModule({
schemas : [NO_ERRORS_SCHEMA]
})
Solution 6 - Angular
app.module.ts
import { MyRoutingModule } from './MyRoutingModulePath';
@NgModule({
imports: [
MyRoutingModule
])