- Install Angular CLI, Node.js and npm to set up the development environment. Refer the below post to set up the environment.
- Create a new workspace and generate a new Routing application by running the following command in command prompt
ng new routingApp –routing
Get your popcorn’s as it takes some time to install the npm packages.
- Generate 3 different components ‘Home’, ‘About Us’ and ‘Contact Us’ in the application.
ng g c home ng g c aboutUs ng g c contactUs
- To configure the corresponding routes, first update src/app/app-routing.module.ts as shown below and import the components
import { HomeComponent } from "app/home/home.component"; import { AboutUsComponent } from "app/about-us/about-us.component"; import { ContactUsComponent } from "app/contact-us/contact-us.component"; const routes: Routes = [ {path: '', redirectTo:'/home', pathMatch:'full'}, {path: 'home', component: HomeComponent}, {path: 'aboutUs', component: AboutUsComponent}, {path: 'contactUs', component: ContactUsComponent} ];
Next update the app.component.html to different routes as shown below:
<nav> <ul> <li><a routerLink="/home">Home</a></li> <li><a routerLink="/aboutUs">About Us</a></li> <li><a routerLink="/contactUs">Contact Us</a></li> </ul> </nav> <router-outlet></router-outlet>
- To serve the application run the command
ng serve -o

Good post