Angular Modules
Tags: angular, codenewbie, webdev, beginners
Published: 2020-05-03 10:40:19

![Image](https://images.pexels.com/photos/169573/pexels-photo-169573.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260)
**Module** is one of the fundamental concepts of **Angular**. Today we are going to understand the types of module and their uses in Angular. 

In simple words,  **_`Module is mechanism to group components, pipes, directives, services that are related.`_**
These individual modules can be combined together to create an application. 

We use **@NgModule** decorator to declare class as _module_. 
_@NgModule_ decorator contains below properties:
- **declarations**: It includes component, directives, pipes that belongs to _this_ module.
- **exports**: It include component, directives, pipes which can be accessible to other NgModule.
- **imports**: Contains Modules whose exported classes needed by _this_ module.
- **providers**: Contains the services generated by _this_ module.
- **bootstrap**: Initialize root component

####Module Encapsulation: 

Similar to ES module, angular module also provide *encapsulation*. We cannot use component from other module unless we define that component in imports list of current module. 
```JavaScript
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule, 
    DashboardModule, //  Imported members from feature module are now accessible in AppModule.
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

So to use exported component from other module we need to import that module first.

According to type of module we are going to use above properties. 

There are different types of Angular Modules:
- **RootModule**: Each angular application has at least one module called as _Root Module_. Conventionally named as AppModule. We launch our by bootstrapping the root module.(check main.ts)
- **Routing Module**: We use this module to load and configure angular routes.
The name of the routing module should match the name of its _companion module_.
	- It does not use declarations property inside @NgModule decorator.
	- Always exports **RouterModule**.
``` javascript
const routes: Routes = [
  {path: '', component: HomeComponent}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  entryComponents: []
})
export class AppRoutingModule { }Javascript
```      
   Use more than one routing module for **better organization** and **lazy loading**.
- **Feature Module**: As App gets more feature we can group those feature and create feature modules.
   - It contains declaration, providers (only services related to the feature)
   - As per the standards it should export only the top component.
```Javascript
@NgModule({
  declarations: [DashboardComponent],
  imports: [
    CommonModule
  ]
})
export class DashboardModule { }
```

- **Shared Module**:
	Almost similar to _Feature Module_. The only difference is they add all their declarations to the exports as well so they can be used in other module.
	Mostly includes UI element like (spinners, toasters, Alerts)
```javascript
@NgModule({
  declarations: [AlerComponent],
  exports: [AlertComponent]
  imports: [
    CommonModule
  ]
})
export class SharedModule { }
```
- **Core Module**: Also known as service module. 
	This module does not have any declaration property as it only focuses on services.
	Inside Core module we can create any service that provides data globally through out the app. Example: AuthService
```javascript

@NgModule({
  providers: [
    AuthService,
    UserServcie
  ]
})
export class CoreModule { }
```
Once you understand the use of each module it will be easy to plan development. 
#### How to create module?
`ng generate module <module-name>  --module=module`
```
   ng generate module shared --module=app
```
Here **--module=app** line will register _SharedModule_ in the imports array of the _AppModule_.

Most of the time developer just starts coding without second thought. Take a pause design your application with modular approach then start coding!!!