'router-outlet'不是一個已知的元素

我有一個角度前端的mvc 5項目。我想按照本教程https://angular.io/guide/router中所述添加路由。所以在我的_Layout.cshtml我加了一個'router-outlet'不是一個已知的元素

<base href="/">

，並在我的app.module創建我的路由。但是，當我運行此我得到以下錯誤：

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/[email protected]:0

在我app.component行

<router-outlet></router-outlet>

給出了一個錯誤，告訴我，Visual Studio可以不能解決標籤「路由器出口」。任何建議如何我可以解決這個錯誤？我是否缺少參考或導入或只是忽略了某些內容？

下面是我的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'; 

}

來源

2017-06-13 Molo

試穿：

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

}

沒有必要configurate在AppModule出口，因爲AppModule不會在應用程序中的其它模塊導入。

來源

2017-06-13 09:48:11

我一直在尋找這幾個小時的代碼。 Thnx！ – Molo

它的工作對我來說，當我添加下面的app.module.ts

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

來源

2018-01-11 10:15:36

'router-outlet'不是一個已知的元素

回答

相關問題