What Is Modules (@NgModule decorator)?

The NgModule is a TypeScript class marked by the @NgModule decorator.

The NgModule is a class and work with the @NgModule decorator function and also takes a metadata object that tells Angular how to compile and run module code.

The Angular module helps you to organize an application into associative blocks of functionality.

An angular module represents a core concept and plays a fundamental role in structuring Angular applications.

The NgModule is used to simplify the ways you define and manage the dependencies in your applications and also you can consolidate different components and services into associative blocks of functionality.

Every Angular application should have at least one module and it contains the components, service providers, pipes and other code files whose scope is defined by the containing NgModule.

The purpose of the module is to declare everything you create in Angular and group them together.

Every application has at least one Angular module, the root module that you bootstrap to launch the application. The Angular root module is called AppModule.

The module is a way to organize your dependencies for

1.          Compiler

2.          Dependency Injection

A module can import other modules and can expose its functionality to other modules. The modules can be loaded eagerly when the application starts or lazy loaded asynchronously by the router.

The angular loads a root dynamically because it is bootstrapped in the Angular Module.

An Angular app needs at least one module that serves as the root module.

You can use CLI commands to generate an app, the default AppModule is as follows –

ng new yourApp

The above CLI command is used to create a new Angular project and this CLI command automatically creates several folders and files which are necessary for project development, testing, and configuration and so on.

The Angular CLI (Command Line Interface) is a tool to initialize, develop, scaffold and maintain Angular applications. To use this we need to install it first and it should be installed globally on your machine.

npm install -g @angular/cli

The following is an example of specifying a NgModule -

//JavaScript imports

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

import { NgModule } from '@angular/core';

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

import { LoginComponent } from './login/login.component';

//AppModule class with @NgModule decorator.

@NgModule({

  declarations: [

    AppComponent,

    LoginComponent

  ],

  imports: [

    BrowserModule

  ],

  providers: [],

  bootstrap: [AppComponent]  // bootstrapped entry component

})

export class AppModule { }

What are the @NgModule Metadata Properties?

The @NgModule decorator identifies AppModule as a NgModule class.

The @NgModule takes a metadata object that tells Angular how to compile and launch the application.

The NgModule’s important metadata properties are as follows –

1.          providers

2.          declarations

3.          imports

4.          exports

5.          entryComponents

6.          bootstrap

7.          schemas

8.          id

The @NgModule class with the decorator and metadata properties -

@NgModule({

  providers?: Provider[]

  declarations?: Array<Type<any> | any[]>

  imports?: Array<Type<any> | ModuleWithProviders | any[]>

  exports?: Array<Type<any> | any[]>

  entryComponents?: Array<Type<any> | any[]>

  bootstrap?: Array<Type<any> | any[]>

  schemas?: Array<SchemaMetadata | any[]>

  id?: string

})

Let understand in detail about NgModule metadata is as follows-

Providers – A list of dependency injection (DI) providers and it defines the set of injectable objects that are available in the injector of this module.

Declarations - A list of declarable classes, components, directives, and pipes that belong to this module. The compiler throws an error if you try to declare the same class in multiple modules.

Imports - A list of modules and it used to import the supporting modules like FormsModule, RouterModule, CommonModule, or any other custom made feature module.

Exports - A list of declarable components, directives, pipes, and modules that an importing module can be used within a template of any component.

EntryComponents - A list of components that should be compiled when this module is defined. By default, an Angular app always has at least one entry component, the root component, AppComponent.

A bootstrapped component is an entry component that Angular loads into DOM during the application launch and other root components loaded dynamically into entry components.

Bootstrap – A list of components that are automatically bootstrapped and the listed components will be added automatically to entryComponents.

Schemas - Defines a schema that will allow any non-Angular elements and properties.

Id – The Id used to identify the modules in getModuleFactory. If left undefined, the NgModule will not be registered with getModuleFactory.

What is the difference between declarations, providers, and import in NgModule?

For more information, see the above question - What Are the @NgModule Metadata Properties?

Why use multiple NgModules?

Multiple NgModules provides some potential benefits.

Actually, the modules help you to organize an application into associative blocks of functionality.

First one is organizing an application code. If you are putting around 99 resource files in the default app module and see the happing.

And the second one is - It opens the possibility of lazy loading via the router.

What Are the Purpose of @NgModule?

The NgModule is used to simplify the ways you define and manage the dependencies in your applications and also you can consolidate different components and services into cohesive blocks of functionality.

The @NgModule metadata divided into three categories as follows.

1.          Static

2.          Runtime

3.          Composability/Grouping

Static – It is compiler configuration and configured via the declarations array.

Runtime - It is injector configuration and configured via the provider’s array.

Composability/Grouping – Introducing NgModules together and configured via the imports and exports arrays.

The following is an example of specifying a NgModule metadata -

@NgModule({

  // Static, This is the compiler configuration

  declarations: [], //declarations is used for configure the selectors.

  entryComponents: [], //entryComponents is used to generate the host factory.

  //Runtime or injector configuration

  providers: [], // providers is used for runtime injector configuration.

  //Composability and Grouping

  imports: [], // imports used for composing NgModules together.

  exports: [] //A list of declarations components, directives, and pipes classes that an importing module can use.

})

What Types of NgModules?

There are four types of NgModules –

1.          Features Module

2.          Routing Module

3.          Service Module

4.          Widget Module

5.          Shared Module

Features Module – The feature modules are NgModules for the purpose of organizing an application code.

Routing Module – The Routing is used to manage routes and also enables navigation from one view to another view as users perform application tasks.

Service Module – The modules that only contain services and providers. It provides utility services such as data access and messaging. The root AppModule is the only module that should import service modules. The HttpClientModule is a good example of a service.

Widget Module - The third party UI component libraries are widget modules.

Shared Module – The shared module allows you to organize your application code. You can put your commonly used components, directives, and pipes into the one module and use whenever required to this module.

What Is Feature Modules?

What Are the Types of Feature Modules?

The feature modules are modules that goal of organizing an application code. It also helps you partition the app into focused areas when you can do everything within the root module.

There are five types of feature modules which are the following-

1.          Domain Feature Modules

2.          Routed Feature Modules

3.          Routing Modules

4.          Service Feature Modules

5.          Widget Feature Modules

Routed Feature Module - Routed feature modules are domain feature modules that components targets of router navigation routes.

A lazy-loaded routed feature module should not be imported by any module.

Routed feature modules do not export anything because their components never appear in the template of an external component.

Routing Module - A routing module provides routing configuration for another module and the routing module focus on the following.

1.          Defines Routes

2.          Adds Router Configuration to the module's imports

3.          Adds service providers to the module's providers

4.          A routing module doesn’t have its own declarations. The components, directives, and pipes are the responsibility of the feature module and not the routing module.

A routing module should only be imported by its companion module.

Service Feature Module - Service modules provide utility services and used to communicate with the server. The HttpClientModule is a great example of a service module.

The root AppModule is the single module that should import service modules.

Domain Feature Module - Domain feature modules deliver a user experience dedicated to a special application domain as like editing a customer and so on.

Widget Feature Module - A widget module makes components, directives, and pipes available to external modules.

The third party UI components and libraries are widget modules.

Import widget modules in any module whose component templates need the widgets.

Why you use BrowserModule, CommonModule, FormsModule, RouterModule, and HttpClientModule?

BrowserModule – The browser module is imported from @angular/platform-browser and it is used when you want to run your application in a browser.

CommonModule – The common module is imported from @angular/common and it is used when you want to use directives - NgIf, NgFor and so on.

FormsModule – The forms module is imported from @angular/forms and it is used when you build template driven forms.

RouterModule – The router module is imported from @angular/router and is used for routing RouterLink, forRoot, and forChild.

HttpClientModule –The HttpClientModule is imported from @angular/common/http and it used to initiate HTTP request and responses in angular apps. The HttpClient is more modern and easy to use the alternative of HTTP.

What are the differences in NgModules and JavaScript Modules?

NgModules vs. JavaScript Modules -

The NgModule is a TypeScript class decorated with @NgModule Decorator - is a fundamental feature of Angular.

JavaScript also has its own module system for managing collections of JavaScript objects. It is completely different from the NgModule system.

In JavaScript, each file is a module and all objects defined in the file belong to that module. The module declares some objects to be public by marking them with the export keyword.

Other JavaScript modules use import statements to access public objects from other modules.

The following is an example of specifying an export and import statements -

export class AppComponent {

   //...

}

After export your class, you can import that file code in another file.

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

Both the JavaScript and Angular use modules to organize applications code.