NgModules

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 is the compilation context of its components, that is, it tells Angular how these components should be compiled. As with ES, a component can only be declared in one module.

In this example TalksModule exports only TalksCmp—the rest is private. This means that only TalksCmp is added to the compilation context of AppModule. Again this is similar to how the export keyword works in JavaScript.

Summary

• NgModules are akin to ES modules: they have declarations, imports, and exports.
• NgModules define the compilation context of their components.