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 ad
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 { }
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 { }
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 { }
It works for me, when i add following code in app.module.ts
@NgModule({ ..., imports: [ AppRoutingModule ], ... })
Try this:
Import RouterModule
into your app.module.ts
import { RouterModule } from '@angular/router';
Add RouterModule
into your imports []
like this:
imports: [ RouterModule, ]
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.
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.