Angular CLI provides the --routing switch (ng new crmapp --routing) that enables you to add routing automatically but we’re going to add routing manually for the sake of understanding the various pieces involved in adding component routing to your Angular application.
In fact, adding routing is quite simple:
- add a separate module (which can be called
AppRoutingModule) in a fileapp-routing.module.ts, and import the module by including it in theimportsof mainAppModule, - add
<router-outlet></router-outlet>inapp.component.html(this is where the Angular Router will insert components matching the current path), - add routes (each route is an object with properties such as path and component etc.).
This is the initial content of app-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
The routes will contain all the routes of the application. After creating the components we’ll see how to add routes to this array.
For now, we want to redirect the visitor to the /accounts path when the home URL is visited so the first path we’ll add is:
{ path: '', redirectTo: 'accounts', pathMatch: 'full' },
The pathMatch specifies the matching strategy. full means that we want to fully match the path.
Next let’s add the other paths:
{ path: '', redirectTo: 'accounts', pathMatch: 'full' },
{
path: 'accounts',
component: AccountListComponent
},
{
path: 'create-account',
component: AccountCreateComponent
},
{
path: 'contacts',
component: ContactListComponent
},
{
path: 'create-contact',
component: ContactCreateComponent
},
{
path: 'leads',
component: LeadListComponent
},
{
path: 'create-lead',
component: LeadCreateComponent
},
{
path: 'opportunities',
component: OpportunityListComponent
},
{
path: 'create-opportunity',
component: OpportunityCreateComponent
}
];
Now open src/app/app.module.ts and import the routing module then add it to the imports array:
import {AppRoutingModule} from './app-routing.module';
[...]
@NgModule({
declarations: [
AppComponent,
[...]
],
imports: [
BrowserModule,
AppRoutingModule
],
[...]
})
export class AppModule { }
Finally, open src/app/app.component.html then add the navigation links and the router outlet:
<a [routerLink]="'/accounts'"> Accounts </a>
<a [routerLink]="'/create-account'"> Create Account </a>
<a [routerLink]="'/contacts'"> Contacts </a>
<a [routerLink]="'/create-contact'"> Create Contact </a>
<a [routerLink]="'/leads'"> Leads </a>
<a [routerLink]="'/create-lead'"> Create Lead </a>
<a [routerLink]="'/opportunities'"> Opportunities </a>
<a [routerLink]="'/create-opportunity'"> Create Opportunity </a>
<div>
<router-outlet></router-outlet>
</div>
