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. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 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 1 : Set base href in index.html. Step 2 : Create a separate routing module file. You can name it anything you want. I named it app-routing.module.ts. Step 3 : Import the angular RouterModule into your application routing module (app-routing.module.ts). Also don't forget to re-export RouterModule. Step 4 : Configure the application routes. Step 5 : Import the application routing module (app-routing.module.ts) in the root AppModule. 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 Now let's implement Step 4. In app-routing.module.ts file specify the application routes. Copy and paste the following code. In addition to the routes, notice we are also importing HomeComponent, EmployeesComponent & PageNotFoundComponent as we are referencing these components in the route configuration. import { HomeComponent } from './home/home.component'; import { EmployeesComponent } from './employees/employees.component'; import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'employees', component: EmployeesComponent }, { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ]; Now let's implement Step 4. In app.component.html copy and paste the HTML code from my blog 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. npm install bootstrap@3 --save Once Bootstrap is installed, open .angular-cli.json file and specify the path to the Bootstrap stylesheet in the styles property as shown below. "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ] 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 http://csharp-video-tutorials.blogspot.com/2017/11/angular-cli-generate-routing-module.html Slides http://csharp-video-tutorials.blogspot.com/2017/11/angular-cli-generate-routing-module_15.html Angular CLI Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CLI Text articles & Slides http://csharp-video-tutorials.blogspot.com/2017/10/angular-cli-tutorial-for-beginners.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists