'bộ định tuyến' không phải là một phần tử đã biết

Question

Tôi có dự án mvc 5 với giao diện góc cạnh. Tôi muốn thêm định tuyến như được mô tả trong hướng dẫn này https://angular.io/guide/router. Vì vậy, trong _Layout.cshtml của tôi, tôi đã thêm một

<base href="/"> 

và tạo định tuyến của tôi trong ứng dụng của tôi.module. Nhưng khi tôi chạy này, tôi nhận được lỗi sau:

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 

Trong app.component tôi dòng

<router-outlet></router-outlet> 

đưa ra một lỗi nói với tôi rằng Visual studio không thể giải quyết tag 'router lối thoát'. Bất kỳ đề xuất làm thế nào tôi có thể sửa lỗi này? Tôi có thiếu một tài liệu tham khảo hoặc nhập khẩu hoặc chỉ cần nhìn một cái gì đó?

Dưới đây là package.json tôi, app.component và 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

Hãy thử với:

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

} 

Không cần để tinh chỉnh xuất khẩu trong AppModule, vì AppModule sẽ không được nhập khẩu bởi các module khác trong ứng dụng của bạn.

Answer 2

Nó làm việc cho tôi, khi tôi thêm mã sau đây trong app.module.ts

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