A step-by-step tutorial to create an angular router for your root section, add a second section using the route production module.

In this tutorial, we learn Angular CLI is a command line interface tool that can create a project. So, let's start with angular routes or just Angular router tutorial.


Step 1: Install The Angular Project.

Install Angular CLI globally on your system by typing the following command.

npm install -g @angular/cli

Now, create one project called myfirstproject

ng new myfirstproject

Step 2: Make three components for the application.

Create one directory inside src>app folder called components.

Next, make three components by typing the following command

ng g c home
ng g c about
ng g c dashboard


It creates a separate folder inside src>app directory, we need to move all these three folders inside the components folder for better project structure angular routes.

So, our app.module.ts file looks like this.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule, RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Routing and Navigation.

The Angular Router enables navigation from one view to the next as users perform application tasks routing module.

First, for angular routes, we need to import the routing modules inside our app.module.ts file.

// app.module.ts

import { RouterModule } from '@angular/router';

imports: [
    BrowserModule, RouterModule
],

Configuration

When you have created the components, its default path is different and now we have moved the components in the angular router, so now its path is different. So, first, we need to change that path in the app.module.ts file.

// app.module.ts

import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';


Okay, now we need to configure the routes. So make one file inside the app directory called App-Routing.Module.ts to file this routing module.

Write the following code in it.

// App-Routing.Module.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'dashboard', component: DashboardComponent }
];
export default appRoutes;


Step 4: Define the Router outlet.

In the app.component.html file, write the following code.

<!-- app.component.html  -->

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!!
  </h1>
  <nav>
    <a routerLink="home" routerLinkActive="active">Home</a>
    <a routerLink="about">About</a>
    <a routerLink="dashboard">Dashboard</a>
  </nav>
  <router-outlet></router-outlet>
</div>


Now, we have already changed the title inside the app.component.ts file.

// app.component.ts

title = 'Welcome to rathorji.in';

Start the app by the following command.

ng serve --open

I hope it can help you...