Angular Routing

app-routes1.module.ts

export const routes: Routes = [];

@NgModule({})
export class AppRoutesModule {}

app-routes2.module.ts

import {RouterModule, Routes} from ‘@anguler/router’; 

export const routes: Routes = [];

@NgModule({})
export class AppRoutesModule {}

app-routes3.module.ts

export const routes: Routes = [{
  path: ‘page1’,
  children: [
  {
    path: ‘’,
    pathMatch: ‘full’,
    component: ‘Page1Component’ },
  {
    path: ‘subpage’,
    component: Page1SubpageComponent
  }]}, {
  path: ‘page2’,
  component: Page2Component
}]

app-routes4.module.ts

import {Page1Component} from './routes/page1/page1.component';
import {Page2Component} from './routes/page2/page2.component';
import {Page1SubpageComponent}
  from './routes/page1.subpage/page1-subpage.component';

app-routes5.module.ts

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

app-routes6.module.ts

{
  path: ‘’,
  redirectTo: ‘page1’,
  pathMatch: ‘full’
},

app-routes7.module.ts

export const routes: Routes = [{
  path: '',
  redirectTo: 'page1',
  pathMatch: 'full'
}, {
  path: 'page1',
  loadChildren: './routes/page1/page1.module#Page1Module'
}, {
  path: 'page2',
  loadChildren: './routes/page2/page2.module#Page2Module'
}]

app.component.html

<router-outlet></router-outlet>

app.module1.ts

import {AppRoutesModule} from ‘./app-routes.module’;
@NgModule({
…,
imports: [
…,
AppRoutesModule
],
…
}

page1-subpage.module.ts

RouterModule.forChild([{
  path: '',
  pathMatch: 'full',
  component: Page1SubpageComponent
}]),

page1.module.ts

RouterModule.forChild([{
  path: '',
  pathMatch: 'full',
  component: Page1Component
}, {
  path: 'subpage',
  loadChildren: ‘../page1.subpage/page1-subpage.module#Page1SubpageModule’
}]),

page2.module.ts

RouterModule.forChild([{
  path: '',
  pathMatch: 'full',
  component: Page2Component
}]),