By default, Angular's built-in module loader uses SystemJS; however, NativeScript provides an enhanced module loader called NSModuleFactoryLoader. Let's provide this in our main routing module to ensure all our modules are loaded with it instead of Angular's default module loader.

Make the following modifications to app/app.routing.ts:

import { NgModule, NgModuleFactoryLoader } from '@angular/core';
import { NativeScriptRouterModule, NSModuleFactoryLoader } from 'nativescript-angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/mixer/home',
    pathMatch: 'full'
  },
  {
    path: 'mixer',
    loadChildren: './modules/mixer/mixer.module#MixerModule'
  },
  {
    path: 'record',
    loadChildren: './modules/recorder/recorder.module#RecorderModule',
    canLoad: [AuthGuard]
  }
];

@NgModule({
  imports: [
    NativeScriptRouterModule.forRoot(routes)
  ],
  providers: [
    AuthGuard,
    {
      provide: NgModuleFactoryLoader,
      useClass: NSModuleFactoryLoader
    }
  ],
  exports: [
    NativeScriptRouterModule
  ]
})
export class AppRoutingModule { }

Now, we can use the standard Angular lazy loading syntax via loadChildren by specifying the default NgModuleFactoryLoader but should instead use NativeScript's enhanced NSModuleFactoryLoader. We won't go into what NSModuleFactoryLoader provides in detail, since it is explained very well here: https://www.nativescript.org/blog/optimizing-app-loading-time-with-angular-2-lazy-loading, and we have a lot more we want to cover in this book.

Excellent. With these upgrades in place, we can leave the service shop and continue on our journey down the highway. Let's move on to implementing our new routing setup. 

Open app/app.component.html; cut its contents to the clipboard and replace them with the following:

<page-router-outlet></page-router-outlet>

This will be the base of our view level implementation. page-router-outlet allows any Component to insert itself in its place, whether it be a single flat route or one with child views of its own. It also allows other Component views to push onto the mobile nav stack, allowing master/detail mobile navigation with back history.

In order for this page-router-outlet directive to work, we need our root AppModule to import our new AppRoutingModule. We will also take this opportunity to remove PlayerModule, which was imported here before. Open app/app.module.ts and make the following modifications:

// angular
import { NgModule } from '@angular/core';

// app
import { CoreModule } from './modules/core/core.module';
import { AppRoutingModule } from './app.routing';
import { AppComponent } from './app.component';

@NgModule({
 imports: [
   CoreModule,
   AppRoutingModule
 ],
 declarations: [AppComponent],
 bootstrap: [AppComponent]
})
export class AppModule { }