Routing in Angular 4

What is Routing in Angular 4 ?

Basically this is a linking to one page to other page without reload window

Generate routing file

—-COMMAND LINE

ng generate module app-routing --flat --module=app

Create Manually

–TS file (app-routing.module.ts)

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { RecipesComponent } from "./recipes/recipes.component";
import { ShoppingListComponent } from "./shopping-list/shopping-list.component";

const appRoutes: Routes = [
    { path: '', component: RecipesComponent},
    { path: 'shopping-list', component: ShoppingListComponent}
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModule{}

–HTML file

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a routerLink="">Recipes</a></li>
<li><a routerLink="shopping-list">Shopping List</a></li>
</ul>
</div>
</div>
</nav>

import routing file into module.ts

all module files should be import in module.ts

–TS File (module.ts)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppRoutingModule } from "./app-routing.module";

@NgModule({
  imports: [
    AppRoutingModule
  ],
})
export class AppModule { }

add router-outlet tag in app.component.html file

–HTML File (app.component.html)

<router-outlet></router-outlet>