In a single-page app, you change what the user sees by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page. As users perform application tasks, they need to move between the different views that you have defined. To implement this kind of navigation within the single page of your app, you use the Angular Router.
Note: Routing helps you to define the navigations for your applications, so if you want to move one screen to another screen that no loading and refreshing the page
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from '@app/home/home.component';
import { AuthGuard } from './guards/auth.gards';
const routes: Routes = [
{ path: 'home', component: HomeComponent, canActivate:[AuthGuard]},
{
path: 'contact',
loadChildren: './contact/contact.module#ContactModule',
canActivate: [AuthGuard, CheckContactAddressGuard]
},
{
path: 'login',
loadChildren: './login/login.module#LoginModule'
},
{ path: 'unauthorized',component:UnauthorizedAccessComponent, canActivate:[AuthGuard]},
{ path:'**', redirectTo: '/home', pathMatch: 'full' },
];
@NgModule({
imports: [RouterModule.forRoot(routes,{useHash:true, onSameUrlNavigation:'reload'})],
exports: [RouterModule]
})
export class AppRoutingModule {
}