У меня есть проект mvc 5 с угловым интерфейсом. Я хотел добавить маршрутизацию, как описано в этом уроке https://angular.io/guide/router. Итак, в моем _Layout.cshtml я добавил
<base href="/">
и создал мою маршрутизацию в моем приложении.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 не может разрешить тег 'router-outlet'. Любые предложения, как я могу исправить эту ошибку? Я пропускаю ссылку или импорт или что-то не замечаю?
Ниже приведены мои 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';
}