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,  ]