Angular 10 - Modules

Modules consist of one or more components. It is a mechanism to group components, directives, pipes, and services that are related, in such a way that can be coalesced with other modules to engender an application. They do not control any HTML. Our modules declare which components can be utilized by components belonging to other modules, which classes will be injected by the dependency injector, and which component gets bootstrapped. Modules sanction us to manage our components to bring modularity to our app.

To be able to define modules we have to utilize the decorator NgModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { KnfDemoComponentComponent } from './knf-demo-component/
                      knf-demo-component.component';

@NgModule({
  declarations: [
   ......
  ],
  imports: [
   ....
  ],
  providers: [],
  bootstrap: [.......]
})
export class AppModule { }

In the example above, we have turned the class AppModule into an Angular module just by using the NgModule decorator. The NgModule decorator requires at least three properties: imports, declarations, and bootstrap.

The property imports expect an array of modules. The property declarations expect an array of components, directives, and pipes that are a component of the module. The bootstrap property is where we define the root component of our module.

Here's how a rudimentary module composed of just one component would look like:

app/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-knf-demo';
}

app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { KnfDemoComponentComponent } from './knf-demo-component/

                        knf-demo-component.component';

@NgModule({
  declarations: [
    AppComponent,
    KnfDemoComponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Our module is importing the BrowserModule as an explicit dependency. The BrowserModule is a built-in module that exports rudimentary directives, pipes, and services.

Given that the root component of our module is the AppComponent we have to list it in the bootstrap array. Because in the declarations property we are supposed to define all the components or pipes that make up our application, we have to define the AppComponent again there additionally.

To bootstrap our module-predicated application, we require to apprise Angular which is our root module to perform the compilation in the browser. This compilation in the browser is additionally known as the "Just in Time" (JIT) compilation.

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));