In the last post, I introduced NgModule. NgModule is how an app’s pieces all fit and work together. Every Angular app has to have at least one NgModule. This is the core root module. Since it is the core root module, it launches the application/. We call this bootstrapping to launch the app. There are three cparts to NgModule.
Declarations Array
Whatever components are used in the NgModule need to be declared and thus added to the declarations array. This tells Angular that these components belong to this module. Additionally, since declarables are added here, you will find things like directives and pipes along with the declared components.
Note: declarables can only belong to a one module.
Imports Array
The imports array is where all dependent modules are placed.
Providers Array
The providers array holds all service dependencies.
NgModule Example
@NgModule({
imports: [
BrowserModule
declarations: [
AppComponent
],
providers: [
SomeService
],
bootstrap: [AppComponent]
})Now, while each Angular app contains at least one NgModule, I would encourage keeping separation of concerns in mind (SRP). You will find that a singular NgModule can get unwieldy quickly. So you will probably create multiple modules in an application.
Happy Coding!
Clay Hess
