Learn in 
Configuring Routing on Angular applications is probably the easiest things to do. All you have to do is select the "Angular Routing" option while creating the scaffolding application using angular CLI. But, wait!! if its so easy why all this discussion ? While installing the routing is easy in angular, creating two routes and making it work is not so easy. We will try to make this process easy. So follow along with this easy to understand Step by Step tutorial.
Without wasting much time, lets create two routes, /dashboard and /user. Once we have configured the setup correctly, we will test these routes to validate.
First, create a simple scaffolding angular application using the command:
ng new angular-routingWhen prompted whether to add Angular Routing option, enter y and make sure routing is configured. This will create a bunch of files to get you started. We will modify some files and add few others. Follow along, here are the steps:
1. Create Routes and create two pages for testing routing setup :
a. Create app.routing.module.ts :
loading...
This is the most critical component of the entire routing. If you try to use dashboard and user routes directly it might not work. The idea is simple. We just have to create two container components for these two pages and render the routes inside it. AppComponent and HomeComponents are the containers components here. Finally redirect everything else to /dashboard.
b. Create dashboard.component.html using command: ng generate component dashboard
loading...
c. Create user.component.html using command: ng generate component user
loading...
d. Create home.component.html using command: ng generate component home
loading...
e. Update existing app.component.html :
loading...
2. Existing app.module.ts should look like below :
loading...
Thats all !! Now start your application using
npm start command.Navigate to
http://localhost:4200/, if eveything is setup properly, you should see a page similar to the below screen. The Dashboard screen will appear by default as it is configured as our default route.
When you click on the
User link, you should navigate to the User screen. Again on User screen, when you click on Dashboard link you should be taken back to Dashboard. This confirms that our client side routing is working fine as expected.For a full working application, refer to the "Download Source" section at the end of this tutorial.
Alright everything is working fine. But wait !! This is working fine only in your development environment as we have setup only client side routing configuration.
To make sure the application runs fine on production too, you need to do some configuration on your server side as well. Refer to this tutorial for the complete configuration for your favorite server : Angular Router Configuration - Apache Http Server, Nginx, Tomcat
Thats all folks !! Happy coding. If you feel this helped you, keep supporting us by or or below or on the articles on social media.
