Configure router in Angular project

ng g component dashboard
ng g module app-routing

Open: srcappapp-routingapp-routing.module.ts

Replace contents with:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from '../dashboard/dashboard.component'

const routes: Routes = [
    {
        path: '',
        component: DashboardComponent,
    },
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes,{useHash:true})
    ],
    exports: [
        RouterModule
    ],
    declarations: []
})
export class AppRoutingModule { }

The last line says that our module has a dependency to the RouterModule module.

Open app.module.ts

Now add the AppRoutingModule to the imports configuration section:

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

@NgModule({
    ...
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        AppRoutingModule,
    ],
    ...
})

export class AppModule { }

In app.component.html, add:

<router-outlet></router-outlet>

Open app-routing.module.ts and add some routes:

...
const routes: Routes = [
    {
        path: '/my-new-route',
        component: MyNewRouteComponent,
    },
    {
        path: '',
        component: DashboardComponent,
    },
];
...

More can be found here:
https://angular.io/tutorial/toh-pt5