'router-outlet'は既知の要素ではありません

Question

私は角度のあるフロントエンドを持つmvc 5プロジェクトを持っています。私はこのチュートリアルhttps://angular.io/guide/routerで説明されているようにルーティングを追加したかったのです。だから私の_Layout.cshtmlで私は

<base href="/"> 

を追加し、私のapp.moduleで私のルーティングを作成しました。私のapp.componentで

<router-outlet></router-outlet> 

は、Visual Studioは、タグ「ルータ・アウトレット」を解決できないことを私に言って、エラーを与える行を

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 

：私はこれを実行すると、私は次のエラーを取得します。どのように私はこのエラーを修正することができますどのような提案？私は参照や輸入がないか、何かを見落としていますか？以下は

は私のpackage.json、app.componentと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 { 

} 

app.component：

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

お試しください：

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

} 

AppModule文句を言わないアプリケーション内の他のモジュールからインポートされているため、AppModuleに輸出を形作るする必要はありません。

Answer 2

私はapp.module.ts

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