With all our feature contexts ready, the time has come to define the top root component, which will kickstart the whole application as a cluster of components laid out in a tree hierarchy. The root component usually has a minimum implementation. The main child components will eventually evolve into branches of child components.

The following is an example of the template of the root component. This is the main visual component that your app is going to live in. Here, it makes sense to define application headers, menus, or viewports for routing:

//app/app.component.ts

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

@Component({
  selector: 'app',
  template: `
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <strong class="navbar-brand">My App</strong>
      </div>
    </div>
  </nav>
  <tasks></tasks>
  `
})
export class AppComponent {}

It has been mentioned before, but it is worth repeating. Any constructs that we use in the app.component.ts file that do not belong to the AppModule need to be imported. Technically, it is the module these constructs belong to that is being imported. You also need to ensure that the constructs are properly exposed by being mentioned in said modules exports keyword. With the preceding root component, we can see that we use two different components in the template for app.component.ts, the <timer-widget>   and <pomodoro-tasks>.  These belong to different modules with the first component belonging to the TimerModule and the second belonging to the TaskModule. This means that the AppModule needs to import both of these modules for the preceding to compile. The app.module.ts should, therefore, look like this:

import { NgModule } from '@angular/core';
import { TimerModule } from './timer/timer.module';
import { TasksModule } from './tasks/tasks.module';

@NgModule({
  imports: [ TimerModule, TasksModule ]
  // omitted for brevity
})
export class AppModule {}