Prepare to bootstrap the AppModule 

We now have a good setup for our feature modules and it's time to bring them all together in our root AppModule responsible for bootstrapping our app. 

It's important to keep the bootstrap of our app as fast as possible. To achieve that, we only want to bootstrap the app with the main features needed for our initial view and lazy load the rest when needed. We know we want our low-level services to be available and ready to use anywhere in the app, so we will definitely want CoreModule upfront.

Our initial view from our sketch is going to start with the player and 2-3 tracks on the list, so the user can immediately playback a mix of pre-recorded tracks we will ship with the app for demonstration purposes. For this reason, we will specify the PlayerModule to load upfront when our app bootstraps, since it will be a primary feature we want to immediately engage with.

We will set up a routing configuration, which will lazy load our RecorderModule when the user taps the record button at the top right of our initial view to begin a recording session.

With this in mind, we can set up our AppModule located at app/app.module.ts, as follows:

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

// app
import { AppComponent } from './app.component';
import { CoreModule } from './modules/core/core.module';
import { PlayerModule } from './modules/player/player.module'; 

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