What is ngmodule in Angular - amresh087/newronaRepos GitHub Wiki

NgModule is a fundamental concept in Angular. It is a decorator that marks a class as an Angular module and provides metadata about the module. Angular applications are modular in nature, and NgModule helps organize an application into cohesive blocks of functionality. Every Angular application has at least one module, the root module, which is typically named AppModule.

Key Features of NgModule

Declarations: Specifies the components, directives, and pipes that belong to the module. These declarations are visible only within the module.

   @NgModule({
     declarations: [
       AppComponent,
       HeaderComponent,
       FooterComponent
     ],
     // Other properties
   })
   export class AppModule { }

Imports: Specifies the external modules that the current module needs. This can include other Angular modules (like CommonModule, FormsModule, etc.) or feature modules created within the application.

   @NgModule({
     imports: [
       BrowserModule,
       FormsModule,
       HttpClientModule
     ],
     // Other properties
   })
   export class AppModule { }

Providers: Specifies the services and other providers that are available throughout the module. These providers are added to the root injector and are shared among all components of the module

   @NgModule({
     providers: [
       DataService,
       AuthService
     ],
     // Other properties
   })
   export class AppModule { }

Bootstrap: Specifies the root component that Angular creates and inserts into the index.html host web page. This property is typically used only in the root module.

   @NgModule({
     bootstrap: [AppComponent]
   })
   export class AppModule { }

Exports: Specifies the subset of declarations that should be visible and usable in the component templates of other modules.

   @NgModule({
     exports: [
       HeaderComponent,
       FooterComponent
     ]
   })
   export class SharedModule { }

Example of a Root Module

Here’s a basic example of a root module (AppModule) in an Angular application:

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { FormsModule } from '@angular/forms';
   import { HttpClientModule } from '@angular/common/http';

   import { AppComponent } from './app.component';
   import { HeaderComponent } from './header/header.component';
   import { FooterComponent } from './footer/footer.component';
   import { DataService } from './services/data.service';

   @NgModule({
     declarations: [
       AppComponent,
       HeaderComponent,
       FooterComponent
     ],
     imports: [
       BrowserModule,
       FormsModule,
       HttpClientModule
     ],
     providers: [
       DataService
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule { }

Feature Modules

In larger applications, you often create feature modules to organize the application into functional areas. Feature modules can be imported into the root module or other feature modules. Here’s an example of a feature module:

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';

    import { UserListComponent } from './user-list/user-list.component';
    import { UserDetailComponent } from './user-detail/user-detail.component';

    @NgModule({
      declarations: [
        UserListComponent,
        UserDetailComponent
      ],
      imports: [
        CommonModule,
        FormsModule
      ],
      exports: [
        UserListComponent,
        UserDetailComponent
      ]
    })
    export class UserModule { }

Core Module

A CoreModule typically contains singleton services (like authentication services) that are used across the entire application. This module is usually imported only once in the root module.

   import { NgModule, Optional, SkipSelf } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { AuthService } from './auth/auth.service';

   @NgModule({
     imports: [CommonModule],
     providers: [AuthService]
   })
   export class CoreModule {
     constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
       if (parentModule) {
         throw new Error('CoreModule is already loaded. Import it in the AppModule only.');
       }
     }
   }

Shared Module

A SharedModule contains common components, directives, and pipes that will be used by multiple modules in the application.

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

   import { HeaderComponent } from './header/header.component';
   import { FooterComponent } from './footer/footer.component';

   @NgModule({
     declarations: [
       HeaderComponent,
       FooterComponent
     ],
     imports: [CommonModule],
     exports: [
       CommonModule,
       HeaderComponent,
       FooterComponent
     ]
   })
   export class SharedModule { }