How it works: Angular Modules

Angular modules are containers for different parts of your app.

You can have nested modules, your app.module is already actually nesting other modules such as BrowserModule and you can add RouterModule and so on.

A module is a class with the @NgModule decorator

import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

To create a module we add @NgModule passing some parameters:

  • bootstrap: The component that will be the root of your application. This configuration is only present on your root module
  • declarations: Resources the module declares. When you add a new component you have to update the declarations (ng generate component does it automatically)
  • exports: Resources the module exports that can be used in other modules
  • imports: Resources the module uses from other modules (only module classes are accepted)
  • providers: Resources that can be injected (di) in a component

A minimum App module is composed by:

  • AppComponent: The main component of your app (see Components)
  • BrowserModule: The module required for your app to run in a browser

Angular How it works series

Check out other posts of this series, Angular How it works.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade