angular - que - ''router-outlet'' no es un elemento conocido

router in angular 6

Question

Tengo un proyecto mvc 5 con una interfaz angular. Quería agregar enrutamiento como se describe en este tutorial https://angular.io/guide/router . Entonces en mi _Layout.cshtml agregué un

<base href="/">

y creé mi ruta en mi app.module. Pero cuando ejecuto esto me sale el siguiente error:

Error: Template parse errors:
''router-outlet'' is not a known element:
1. If ''router-outlet'' is an Angular component, then verify that it is part of this module.
2. If ''router-outlet'' is a Web Component then add ''CUSTOM_ELEMENTS_SCHEMA'' to the ''@NgModule.schemas'' of this component to suppress this message. ("
<a routerLink="/dashboard">dashboard</a>
</nav>
[ERROR ->]<router-outlet></router-outlet>
"): ng:///AppModule/AppComponent.html@5:0

En mi app.component la línea

<router-outlet></router-outlet>

da un error diciéndome que Visual studio no puede resolver la etiqueta ''router-outlet''. ¿Alguna sugerencia de cómo puedo solucionar este error? ¿Me estoy perdiendo una referencia o una importación o simplemente estoy pasando por alto algo?

A continuación están mi package.json, app.component y app.module

package.json

{
"version": "1.0.0",
"name": "app",
"private": true,
"scripts": {},
"dependencies": {
"@angular/common": "^4.2.2",
"@angular/compiler": "^4.2.2",
"@angular/core": "^4.2.2",
"@angular/forms": "^4.2.2",
"@angular/http": "^4.2.2",
"@angular/platform-browser": "^4.2.2",
"@angular/platform-browser-dynamic": "^4.2.2",
"@angular/router": "^4.2.2",
"@types/core-js": "^0.9.41",
"angular-in-memory-web-api": "^0.3.2",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"graceful-fs": "^4.0.0",
"ie-shim": "^0.1.0",
"minimatch": "^3.0.4",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.0.1",
"systemjs": "^0.20.12",
"zone.js": "^0.8.12"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.1",
"gulp-tsc": "^1.3.2",
"gulp-typescript": "^3.1.7",
"path": "^0.12.7",
"typescript": "^2.3.3"
}
}

app.module:

import { NgModule } from ''@angular/core'';
import { BrowserModule } from ''@angular/platform-browser'';
import { FormsModule } from ''@angular/forms'';
import { RouterModule, Routes } from ''@angular/router'';
import { AppComponent } from ''./app.component'';
import {DashboardComponent} from "./dashboard/dashboard.component"
const appRoutes: Routes = [
{
path: '''',
redirectTo: ''/dashboard'',
pathMatch: ''full'',
component: DashboardComponent
},
{
path: ''dashboard'',
component: DashboardComponent
}
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes),
BrowserModule,
FormsModule
],
exports: [RouterModule],
declarations: [
AppComponent,
DashboardComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}

componente de la aplicación:

import { Component } from ''@angular/core'';
@Component({
selector: ''my-app'',
template: `
<h1>{{title}}</h1>
<nav>
<a routerLink="/dashboard">dashboard</a>
</nav>
<router-outlet></router-outlet>
`
})
export class AppComponent {
title = ''app Loaded'';
}

Answer 1

¡Es mejor crear un componente de enrutamiento que maneje todas sus rutas! ¡De la documentación angular del sitio web! Esa es una buena práctica!

ng generar módulo de enrutamiento de aplicaciones --flat --module = app

La CLI anterior genera un módulo de enrutamiento y agrega a su módulo de aplicación, todo lo que necesita hacer desde el componente generado es declarar sus rutas, también no olvide agregar esto:

exports: [
RouterModule
],

a su decorador ng-module ya que no viene con el módulo de enrutamiento de aplicaciones generado por defecto!

Answer 2

Aquí está la solución rápida y simple si alguien está recibiendo el error:

"''router-outlet'' no es un elemento conocido" en proyecto angular,

Entonces,

Simplemente vaya al archivo "app.module.ts" y agregue la siguiente línea:

import { AppRoutingModule } from ''./app-routing.module'';

Y también ''AppRoutingModule'' en importaciones.

Answer 3

En su archivo app.module.ts

import { RouterModule, Routes } from ''@angular/router'';
const appRoutes: Routes = [
{
path: '''',
redirectTo: ''/dashboard'',
pathMatch: ''full'',
component: DashboardComponent
},
{
path: ''dashboard'',
component: DashboardComponent
}
];
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes),
FormsModule
],
declarations: [
AppComponent,
DashboardComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}

Agrega este código. Feliz codificación.

Answer 4

Este problema también estuvo conmigo. Truco simple para ello.

 @NgModule({
imports: [
.....
],
declarations: [
......
],
providers: [...],
bootstrap: [...]
})

úsalo como en el orden anterior. Primeras importaciones y luego declaraciones. Funcionó para mí.

Answer 5

Funciona para mí, cuando agrego el siguiente código en app.module.ts

@NgModule({
...,
imports: [
AppRoutingModule
],
...
})

Answer 6

Gracias ejemplo de Hero Editor, donde encontré la definición correcta:

Cuando genero el módulo de enrutamiento de aplicaciones:

ng generate module app-routing --flat --module=app

y actualice el archivo app-routing.ts para agregar:

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

Aquí está el ejemplo completo:

import { NgModule } from ''@angular/core'';
import { RouterModule, Routes } from ''@angular/router'';
import { DashboardComponent } from ''./dashboard/dashboard.component'';
import { HeroesComponent } from ''./heroes/heroes.component'';
import { HeroDetailComponent } from ''./hero-detail/hero-detail.component'';
const routes: Routes = [
{ path: '''', redirectTo: ''/dashboard'', pathMatch: ''full'' },
{ path: ''dashboard'', component: DashboardComponent },
{ path: ''detail/:id'', component: HeroDetailComponent },
{ path: ''heroes'', component: HeroesComponent }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}

y agregue AppRoutingModule a las importaciones de app.module.ts:

@NgModule({
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule
],
providers: [...],
bootstrap: [AppComponent]
})

Answer 7

Probar con:

@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes),
FormsModule
],
declarations: [
AppComponent,
DashboardComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}

No es necesario configurar las exportaciones en AppModule , ya que AppModule no será importado por otros módulos en su aplicación.

Answer 8

Si está realizando pruebas unitarias y obtiene este error, RouterTestingModule en su app.component.spec.ts o dentro de las especificaciones de sus componentes destacados.

import { RouterTestingModule } from ''@angular/router/testing'';
Add RouterTestingModule into your imports [] like
describe(''AppComponent'', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));

Answer 9

Suponiendo que está utilizando Angular 6 con angular-cli y ha creado un módulo de enrutamiento separado que es responsable de las actividades de enrutamiento: configure sus rutas en la matriz de Rutas.Asegúrese de declarar RouterModule en la matriz de exportaciones. El código se vería así:

@NgModule({
imports: [
RouterModule,
RouterModule.forRoot(appRoutes)
// other imports here
],
exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 10

Prueba esto:

Importe RouterModule a su app.module.ts

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

Agregue RouterModule a sus imports []

Me gusta esto:

 imports: [ RouterModule, ]