Angular NgModules


What is an NgModule?

An NgModule is a collection of metadata describing components, directives, services, pipes, etc. It’s done automatically with Angular CLI, but the first we must load a root NgModule. The purpose of a NgModule is to declare each thing we create in Angular, and group them together.
It is defined by a class decorated with @NgModule(). The @NgModule() decorator is a function that takes a single metadata object, whose properties describe the module. The most important properties are as follows-
• declarations: The components, directives, and pipes that belong to this NgModule.
• exports: The subset of declarations that should be visible and usable in the component templates of other NgModules.
• imports This is where we import other modules.
• providers: Contribute to the global collection of services and accessible in all parts of the app. We can also specify providers at the component level, which is often preferred.
• bootstrap: The component used to launch the app, the AppComponent by default. All apps must have at least one.

import { NgModule } from '@angular/core'; import { SomeComponent } from './some.component'; import { SomeDirective } from './some.directive'; import { SomePipe } from './some.pipe'; import { SomeService } from './shared/some.service'; @NgModule({ Import:[SomeModules], declarations: [SomeComponent, SomeDirective, SomePipe], providers: [SomeService], bootstrap: [AppComponent] }) export class SomeModule {}

 Create an NgModule with the CLI command
1. We can create an NgModule by running- ng generate module .
2. Once created, you can automatically add resources to the module by running-
ng generate component
--module
This command will create a new component, then add it to the declarations of the module we specified.
 Types of NgModules
a) Features - Related business logic that can be packaged into a single concern.
b) Routing - Used to manage routes. Should not declare anything.
c) Service - Modules that only contain services/providers.
d) Widget/Shared- Components you use everywhere. Loading spinners, social media icons, etc.
 Use of multiple NgModules
Multiple NgModules provides two potential benefits-
• It keeps business logic organized.
• Possibility for lazy loading via the router.
 NgModule and scopes / visibility
Note:- The confusion starts with components and services not having the same scope / visibility:
• declarations / components are in local scope (private visibility),
• providers / services are in global scope (public visibility).
It means the components we declared are only used in the current module. If we need to use them outside, in other modules, we must export them.

import { NgModule } from '@angular/core'; import { SomeComponent } from './some.component'; import { SomeDirective } from './some.directive'; import { SomePipe } from './some.pipe'; @NgModule({ declarations: [SomeComponent, SomeDirective, SomePipe], exports: [SomeComponent, SomeDirective, SomePipe] }) export class SomeModule {}

 Different Options provided in NgModule are following-
1. Providers: The set of injectable objects that are available in the injector of this module.
Syntax-

providers: Provider[] class Greeter { greet(name:string) { return 'Hello ' + name + '!'; } } @NgModule({ providers: [ Greeter ] }) class HelloWorld { greeter:Greeter; constructor(greeter:Greeter) { this.greeter = greeter; } }

2. Declarations: The set of components, directives, and pipes (declarable) that belong to this module.
Syntax- declarations:

Array | any[]> @NgModule({ declarations: [NgFor] }) class CommonModule { }

3. Imports : The set of NgModules whose exported declarable are available to templates in this module.
Syntax-

imports: Array | ModuleWithProviders<{}> | any[]> @NgModule({ imports: [CommonModule] }) class MainModule { }

4. Exports : The set of components, directives, and pipes declared in this NgModule that can be used in the template of any component that is part of an NgModule that imports this NgModule. Exported declarations are the module's public API. Syntax-

exports: Array | any[]> @NgModule({ exports: [NgFor] }) class CommonModule { }

5. EntryComponents: The set of components to compile when this NgModule is defined, so that they can be dynamically loaded into the view. Syntax-

entryComponents: Array | any[]>

6. Bootstrap : The set of components that are bootstrapped when this module is bootstrapped. The components listed here are automatically added to entryComponents. Syntax-

bootstrap: Array | any[]>

7. Schemas: The set of schemas that declare elements to be allowed in the NgModule. Elements and properties that are neither Angular components nor directives must be declared in a schema. Syntax-

schemas: Array

8. Id: A name or path that uniquely identifies this NgModule in getModuleFactory. If left undefined, the NgModule is not registered with getModuleFactory.
Syntax- id: string

9. Jit: If true, this module will be skipped by the AOT compiler and so will always be compiled using JIT.
Syntax- jit: true