问题
I have a mvc 5 project with a angular frontend . I wanted to add routing as described in this tutorial https://angular.io/guide/router. So in my _Layout.cshtml I added a
<base href="/">
and created my routing in my app.module. But when I run this I get the following error:
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
In my app.component the line
<router-outlet></router-outlet>
gives an error telling me that Visual studio cannot resolve the tag 'router-outlet'. Any suggestions how I can fix this error? Am I missing a reference or a import or just overlooking something?
Below are my package.json ,app.component and 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.ts:
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.ts:
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';
}
回答1:
Try with:
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes),
FormsModule
],
declarations: [
AppComponent,
DashboardComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
There is no need to configure the exports in AppModule, because AppModule wont be imported by other modules in your application.
回答2:
Try this:
Import RouterModule into your app.module.ts
import { RouterModule } from '@angular/router';
Add RouterModule into your imports []
like this:
imports: [ RouterModule, ]
回答3:
If you are doing unit testing and get this error then Import RouterTestingModule into your app.component.spec.ts or inside your featured components' 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();
}));
回答4:
Assuming you are using Angular 6 with angular-cli and you have created a separate routing module which is responsible for routing activities - configure your routes in Routes array.Make sure that you are declaring RouterModule in exports array. Code would look like this:
@NgModule({
imports: [
RouterModule,
RouterModule.forRoot(appRoutes)
// other imports here
],
exports: [RouterModule]
})
export class AppRoutingModule { }
回答5:
It works for me, when i add following code in app.module.ts
@NgModule({ ..., imports: [ AppRoutingModule ], ... })
回答6:
Thank you Hero Editor example, where I found the correct definition:
When I generate app routing module:
ng generate module app-routing --flat --module=app
and update the app-routing.ts file to add:
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
Here are the full example:
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 {}
and add AppRoutingModule into app.module.ts imports:
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule
],
providers: [...],
bootstrap: [AppComponent]
})
回答7:
Its just better to create a routing component that would handle all your routes! From the angular website documentation! That's good practice!
ng generate module app-routing --flat --module=app
The above CLI generates a routing module and adds to your app module, all you need to do from the generated component is to declare your routes, also don't forget to add this:
exports: [
RouterModule
],
to your ng-module decorator as it doesn't come with the generated app-routing module by default!
回答8:
This issue was with me also. Simple trick for it.
@NgModule({
imports: [
.....
],
declarations: [
......
],
providers: [...],
bootstrap: [...]
})
use it as in above order.first imports then declarations.It worked for me.
回答9:
There are two ways.
1. if you want to implement app.module.ts file then:
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'user', component: UserComponent },
{ path: 'server', component: ServerComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
]
})
export class AppModule { }- if you want to implement
app-routing.module.ts(Separated Routing Module) file then:
//app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'users', component: UsersComponent },
{ path: 'servers', component: ServersComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [RouterModule]
})
export class AppRoutingModule { }
//................................................................
//app.module.ts
import { AppRoutingModule } from './app-routing.module';
@NgModule({
imports: [
AppRoutingModule
]
})
export class AppModule { }回答10:
In your app.module.ts file
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 {
}
Add this code. Happy Coding.
回答11:
Here is the Quick and Simple Solution if anyone is getting the error:
"'router-outlet' is not a known element" in angular project,
Then,
Just go to the "app.module.ts" file & add the following Line:
import { AppRoutingModule } from './app-routing.module';
And also 'AppRoutingModule' in imports.
来源：https://stackoverflow.com/questions/44517737/router-outlet-is-not-a-known-element