---
title: 13. Angular Modules
tags: Angular Getting Started
image:
---

# 13. Angular Modules

:::success
What is an Angular Module?

-> A class with an NgModule decorator

Aim:
* organize the pieces of the app
* extend the app with the capabilities from external libraries
* provide a template resolution environment
:::

==Aggregate== and ==re-export==

lazy loading by the router

** can import Angular module

** can export Angular module

@NgModule({
...,
imports:[
BrowserModule,
FormsModule,
...
],
...
})

-----------------------------------------------------------------------

[toc]

<br/>

## Bootstrap Array Truth

1. Every app must bootstrap at least one component. the root application component.

2. The bootstrap array should only be used in the root application module, AppModule.
(Other Angular module won't use bootstrap array)

<br/>

## Declarations Array Truth

1. Only declare components, directives and pipes.

2. Every component, directive, and pipe we create must belong to one and only one Angular module.

<br/>

## Exports Array Truth

1. Export any component, directive, or pipe if other components need it.

2. Re-export modules to re-export their components, directives, and pipes

3. We can export something without including it in the imports array

<br/>

## Imports Array Truth

1. Only import what this module needs

2. Importing a module does not provide access to its imported modules
* AppModule cannot directly use FormsModule when SharedModule imports FormsModule

<br/>

3. Use the imports array to register services provided by Angular or third-party modules
(==Import the module in the AppModule to ensure its services are registered one time==)

<br/>

## Providers Array


* Above two way, Angular recommend the second one -> using @Injectable decorator to replace providers array

...
@Injectable({
providedIn: 'root'
})
export class ProductService{...}

<br/>

## Demo Time

### 1. Feature Module

#### * Define a Feature Module
Build Product Module (imports CommonModule, BrowserModule cannot import here since BrowserModule only used in AppModule)

* import CommonModule to use ngIf

**Use cli to create a feature module**

ng g m products/product --flat -m app

==-m app== means import it in AppModule

-----------------------------------------------------------------

#### * Use Router in Feature Module

//product.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
imports { FormsModule} from '@angular/forms';
imports { RouterModule } from '@angular/router';

@NgModule({

declarations: [...],
imports: [
CommonModule,
FormsModule,
RouterModule.forChild([
{path: 'products', component: ProductListComponent},
{
path: 'products/:id',
canActivate: [ProductDetailGuard],
component: ProductDetailComponent
}
])
]
})
export class ProductModule{}

RouterModule.forChild([])

-> let router doesn't register service again

<br/>

### 2. Share Module

:::success
* Organize commonly used pieces of our application (export and share)

:::


**Use cli to create a share module**

ng g m shared/shared --flat -m products/product.module

<br/>

**ShareModule**

//share.module.ts
imports { NgModule } from '@angular/core';
imports { CommonModule } from '@angular/common';

@NgModule({

declarations: [
StarComponent
],

imports: [
CommonModule
],

exports:[
CommonModule,
FormsModule,
StartComponent
]

})

export class SharedModule{}