Angular Modules - Basics

Angular is a popular framework for building rich UIs and high-performance Web Applications. It's also very opinionated in its code structure, meaning that the framework prefers things to be done "the angular way". Part of this means including Angular Modules in your application/library. But what are modules exactly? 🤔🤔🤔

Modules

An Angular Module is simply a way to group individual pieces of logic and components together under one umbrella. Let's take a look at the most common module that all Angular applications have: AppModule.

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

import { AppComponent } from './app.component';

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

There is an @NgModule decorator that tells Angular to prepare this class to be a Module.
The decorator accepts an object that customizes the module.

---

The bootstrap option is specific to AppModule since it specifies the entry point through which Angular loads the rest of the application.

---

The declarations array shows what this module contains. Components, pipes and directives are listed here and can be used within this module and can interact with each other. For example, if our AppModule was:

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

Then inside our app.component.html, we could have something like:

<app-test-one> </app-test-one>
<app-test-two> </app-test-two>

This is because these 2 components were declared in AppModule and therefore, were made available. Generally speaking, whatever we put in the declarations array of AppModule becomes globally available to use.

---

The imports and exports array tells us what other modules are connected to this one. It allows us to compose modules together like lego blocks. For example:

@NgModule({
  imports:      [ CommonModule ],
  declarations: [ FirstComponent, SecondComponent ],
  providers: [],
  exports: [FirstComponent]
})
export class FirstModule { }

@NgModule({
  imports:      [ CommonModule, FirstModule ],
  declarations: [],
  providers: [],
})
export class SecondModule { }

Usually these modules would be in different files but they are next to each other for the sake of example. We can see that:

• FirstModule exports a component called FirstComponent
• SecondModule imports FirstModule. This means that FirstComponent is now available to use inside of SecondModule.

We also see that FirstModule has another component called SecondComponent but it isn't exported. This means it can never be made available to other modules that import FirstModule.

---

The providers array allows us to inject default or replacement values, classes and more wherever it appears in code associated with our module. It's much clearer with an example.

Angular Material Components have many defaults but we can change those defaults using the providers array of the module where our Material Components are imported.

@NgModule({
  imports:      [
    BrowserModule, 
    BrowserAnimationsModule,
    MatExpansionModule
  ],
  declarations: [ AppComponent ],
  providers: [
     { 
      provide: MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,
      useValue: {
        collapsedHeight: '64px',
        expandedHeight: '80px'
      }
    }
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

In the above example, we tell Angular Material to ignore the defaults set for <mat-expansion-panel> and apply the configuration that we provided. Remember that this will affect all expansion panels used in this module.

Conclusion

We covered what an Angular Module is and the basic parts that make up Angular Modules. Hopefully this article was helpful and that you understand modules just a little more.

There are lots of other topics to cover in Angular Modules and I aim to tackle them all. So stay tuned and thanks for reading! ❤️