multiple - Angular2-''router-outlet'' no es un elemento conocido

router.navigate angular 5

Question

Creé rutas con caminos secundarios profundos. Agregué <router-outlet> al componente AdminComponent que envolví en NgModule. Pero después de actualizar la página, recibí este error:

''router-outlet'' is not a known element

Tal vez ocurrió porque olvidé importar algún módulo a admin.module.ts

Por favor ayuda. Gracias.

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 y 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 {
}

Answer 1

Agrega este código

import { provideRoutes} from ''@angular/router'';

a su app.module.ts

Trabajó para mi.

Answer 2

En su archivo app.module.ts

import { routing } from ''./app-routing.module'';
//and then write within imports
@NgModule({
declarations: [
AppComponent,
NavbarComponent
],
imports: [
BrowserModule,
**routing**,
EmployeeModule
],

Answer 3

Esto funciona para mi:

Agregue el esquema [NO_ERRORS_SCHEMA] en AppModule.

import { NO_ERRORS_SCHEMA } from ''@angular/core'';
@NgModule({
schemas : [NO_ERRORS_SCHEMA]
})

Answer 4

app.module.ts

import { MyRoutingModule } from ''./MyRoutingModulePath'';
@NgModule({
imports: [
MyRoutingModule
])

Answer 5

no exportó el RouterModule.

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})

Answer 6

AdminComponent es parte de AdminComponentModule y no ha importado RouterModule dentro del módulo AdminComponentModule :

// 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 {
}