'router-outlet' no es un elemento conocido

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.cshtmlagregué un

<base href="/">

y creé mi enrutamiento en mi módulo de aplicación. Pero cuando ejecuto esto, aparece 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 componente de aplicación, la línea

<router-outlet></router-outlet>

da un error que me dice que Visual Studio no puede resolver la etiqueta 'router-outlet'. ¿Alguna sugerencia de cómo puedo solucionar este error? ¿Me falta una referencia o una importación o simplemente me olvido de algo?

A continuación se muestran 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.ts:

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 {

}

app.component.ts:

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';

}

Prueba con:

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

No es necesario configurar las exportaciones en AppModule, porque AppModuleno serán importadas por otros módulos en su aplicación.

Prueba esto:

Importar RouterModulea tuapp.module.ts

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

Añade RouterModulea tuimports []

Me gusta esto:

 imports: [    RouterModule,  ]

Si está haciendo pruebas unitarias y obtiene este error, entonces importe RouterTestingModuleen su app.component.spec.tso dentro de sus componentes destacados ' spec.ts:

import { RouterTestingModule } from '@angular/router/testing';

Agrega RouterTestingModulea tu Me imports: []gusta

describe('AppComponent', () => {

  beforeEach(async(() => {    
    TestBed.configureTestingModule({    
      imports: [    
        RouterTestingModule    
      ],
      declarations: [    
        AppComponent    
      ],    
    }).compileComponents();    
  }));

Suponiendo que está utilizando Angular 6 con angular-cli y ha creado un módulo de enrutamiento por 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 { }

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

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

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

Cuando genero el módulo de enrutamiento de la aplicación:

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 en las importaciones de app.module.ts:

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

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

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

La CLI anterior genera un módulo de enrutamiento y lo 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.

Hay dos maneras. 1. si desea implementar el app.module.tsarchivo, entonces:

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

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'user', component: UserComponent },
  { path: 'server', component: ServerComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ]
})
export class AppModule { }

2. si desea implementar el app-routing.module.tsarchivo (Módulo de enrutamiento separado), entonces:

//app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', component: UsersComponent },
  { path: 'servers', component: ServersComponent }
];

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

//................................................................

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

@NgModule({
  imports: [
    AppRoutingModule
  ]
})
export class AppModule { }

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

 @NgModule({
  imports: [
   .....       
  ],
 declarations: [
  ......
 ],

 providers: [...],
 bootstrap: [...]
 })

úselo como en el pedido anterior. Primero las importaciones y luego las declaraciones. Funcionó para mí.

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. Codificación feliz.

Aquí está la solución rápida y simple si alguien recibe 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 las importaciones.