我有一个带角度前端的mvc 5项目。我想按照本教程https://angular.io/guide/router中的描述添加路由。所以在我的_Layout.cshtml中我添加了一个
<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/AppComponent.html@5: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';
}
试试:
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes),
FormsModule
],
declarations: [
AppComponent,
DashboardComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}
没有必要在AppModule
中配置导出,因为AppModule
不会被应用程序中的其他模块导入。
如果有人收到错误,这是快速简单的解决方案:
“'router-outlet'在角度项目中不是一个已知的元素,
然后,
只需转到“app.module.ts”文件并添加以下行:
import { AppRoutingModule } from './app-routing.module';
还有'AppRoutingModule'进口。
试试这个:
将RouterModule
导入你的app.module.ts
import { RouterModule } from '@angular/router';
将RouterModule
添加到你的imports []
像这样:
imports: [ RouterModule, ]
如果您正在进行单元测试并获得此错误,请将RouterTestingModule
导入app.component.spec.ts或您的特色组件的spec.ts内
import { RouterTestingModule } from '@angular/router/testing';
Add RouterTestingModule into your imports [] like
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));
假设您正在使用带有angular-cli的Angular 6,并且您已创建了一个负责路由活动的单独路由模块 - 在Routes数组中配置您的路由。请确保您在exports数组中声明了RouterModule。代码看起来像这样:
@NgModule({
imports: [
RouterModule,
RouterModule.forRoot(appRoutes)
// other imports here
],
exports: [RouterModule]
})
export class AppRoutingModule { }
当我在app.module.ts中添加以下代码时,它适用于我
@NgModule({ ..., imports: [ AppRoutingModule ], ... })
谢谢Hero Editor的例子,我找到了正确的定义:
当我生成应用路由模块时:
ng generate module app-routing --flat --module=app
并更新app-routing.ts文件以添加:
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
以下是完整的示例:
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 {}
并将AppRoutingModule添加到app.module.ts导入中:
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule
],
providers: [...],
bootstrap: [AppComponent]
})
最好创建一个可以处理所有路由的路由组件!从角网站文档!这是一个很好的做法!
ng generate module app-routing --flat --module = app
上面的CLI生成一个路由模块并添加到你的app模块,你需要从生成的组件中做的就是声明你的路由,也不要忘记添加这个:
exports: [
RouterModule
],
到您的ng-module装饰器,因为默认情况下它没有生成的app-routing模块!
这个问题也和我在一起。简单的伎俩。
@NgModule({
imports: [
.....
],
declarations: [
......
],
providers: [...],
bootstrap: [...]
})
按照上面的顺序使用它。先输入然后声明。它对我有用。
在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 {
}
添加此代码。快乐的编码。