Declarations, imports, and exports

NgModules are the unit of compilation and distribution of Angular components and pipes. In many ways, they are similar to ES6 modules, in that they have declarations, imports, and exports.

Let's look at this example:

@NgModule({
  declarations: [FormattedRatingPipe, WatchButtonCmp, \ 
    RateButtonCmp, TalkCmp, TalksCmp],
  exports: [TalksCmp]
})
class TalksModule {}

@NgModule({
  declarations: [AppCmp],
  imports: [BrowserModule, TalksModule],
  bootstrap: [AppCmp]
})
class AppModule {}

Here we define two modules: TalksModule and AppModule. TalksModule has all the components and pipes that do actual work in the application, whereas AppModule has only AppCmp, which is a thin application shell.

TalksModule declares four components and one pipe. The four components can use each other in their templates, similar to how classes defined in an ES module can refer to each other in their methods. Also, all the components can use FormattedRatingPipe. So an NgModule...