Angular CLI generate routing module

In this video we will discuss generating routing module using the Angular CLI.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

To make Angular CLI generate a routing module, all you have to do is use --routing option along with the ng new command when generating a new Angular project.
ng new RoutingDemo --routing

In our previous video, we discussed the steps to implement routing in a separate module, and them import that routing module in the application root module AppModule. Here are those steps.

Step 4 : Configure the application routes.

Step 6 : Specify where you want the routed component view template to be displayed using the router-outlet directive

Step 7 : Create a navigation menu and tie the configured routes with the menu using the routerLink directive. Optionally, use the routerLinkActive directive to style the current route that is active, so the user knows the page that he is on, in the application.

Out of the above 7 steps, we only need to implement steps 4 & 7. The rest of the steps are implemented by the Angular CLI out of the box. Just imagine the amount of time we save.

Before we can implement steps 4 & 7. Let's generate the following 3 components.
Component Angular CLI Command
HomeComponent ng g c home
EmployeesComponent ng g c employees
PageNotFoundComponent ng g c pageNotFound

const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'employees', component: EmployeesComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];

Finally we need to install and reference Bootstrap, to style the navigation menu. To install bootstrap execute the following npm command. We can execute this command in the command prompt window or in the integrated terminal window in Visual Studio Code.

"styles": [
]

At this point stop the server. Build and run the application again using the following Angular CLI command. Routing should be working as expected.
ng serve --open

Text version of the video

Slides

Angular CLI Tutorial

Angular CLI Text articles & Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

[easy-draw]

Logical path to explain Angular perfectly as always txn Kudvenkat looking forward for the rest of the tutorial!

[gkmishra]

thanks sir, your video are best, please make video

wcf and wpf interview question and answers

[lifewithsuryanvi]

I am new to angular .Please tell me how can i get .anglar-cli.json file.It is missing in my project folder.

[jishnubitm]

how do I generate a routing module in an existing angular-cli project, can this be only done when you are creating a project or it can be done later as well once project is created

[shaifulislam]

my routing not working angular.json i give this two line : "styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],

[gajamjyothi]

Hi, Could please help how to call external url's using routing application, that external page should open within the same application not in new page

[baseerx]

how to add routing if app is already created without mentioning --routing ?

[gkmishra]

give tutorial video on

XHTML, DHTML

[sashidhar]

Except creating a separate routing module, everything is same as the previous video...

[dyldvine]

All the sudden he went to light mode in VS Code...?