https://angular.io/tutorial/toh-pt5 see
Add a default route When the app starts, the browsers address bar points to the web site's root. That doesn't match any existing route so the router doesn't navigate anywhere. The space below the is blank.
To make the app navigate to the dashboard automatically, add the following route to the AppRoutingModule.Routes array.
content_copy { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, This route redirects a URL that fully matches the empty path to the route whose path is '/dashboard'.
After the browser refreshes, the router loads the DashboardComponent and the browser address bar shows the /dashboard URL.
Add dashboard link to the shell The user should be able to navigate back and forth between the DashboardComponent and the HeroesComponent by clicking links in the navigation area near the top of the page.
Add a dashboard navigation link to the AppComponent shell template, just above the Heroes link.
src/app/app.component.html content_copy
Dashboard Heroes After the browser refreshes you can navigate freely between the two views by clicking the links.const routes: Routes = [ { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, { path: 'dashboard', component: DashboardComponent }, { path: 'detail/:id', component: HeroDetailComponent }, { path: 'heroes', component: HeroesComponent } ];