What is @NgModule actually in Angular?

Question

I am new to Angular 2.

What is @NgModule actually in Angular 2? I referred through the official documentation by the Angular. But I didn't have any clarity.

Answer 1

As applications started to become more and more complex, it became evident that all applications should be divided into modules. Each module is a small mini application on its own, but now you can bundle all these mini-applications to make your larger application.

Angular's answer to creating modules is @NgModule. This is the tag that allows you to create a module. A module in angular consists of components or other module's components along with other stuff that we will not talk about.

So let's say your application has two big sections - wishlist, and cart. You can create modules for each of them - WishlistModule and CartModule. In WishlistModule you will have several components (decorated as @NgComponent) such as displaying items, dragging and dropping items, etc. Similarly for CartModule.

To create modules, you will need to use @NgModule like below.

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

import { WishlistMainComponent }   from './wishlistMain.component';
import { WishlistShowComponent }   from './wishlistShow.component';
import { WishlistDragComponent }   from './wishlistDrag.component';
import { HeaderModule }   from './header.module';

@NgModule({
  imports:      [ 
    BrowserModule,
    HeaderModule
  ],
  declarations: [
    WishlistMainComponent, WishlistShowComponent, WishlistDragComponent
  ],
  bootstrap: [ WishlistMainComponent ]
})
export class WishlistModule { }

As other answers have already pointed out, @NgModule does a lot behind the scenes, but in simple terms, it declares a module. It is sort of like a Java class, and whatever you pass in the bootstrap option is like the main() method.

A module (or @NgModule) in itself is nothing but just a briefcase containing a bunch of components, and really, the components are what actually your application is made of. A component defines a tag e.g. <wishlist></wishlist> where angular puts all your wishlist code. The module is just under which the component lives, and if you wish to use an external component, then you can only do so by importing its module, just like Java class and methods.

Answer 2

First of all, have another read of https://angular.io/docs/ts/latest/guide/ngmodule.html and definitely https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html as well.

An @NgModule does all the magic setup. It sets up the dependency injection, pulls in any 3rd party modules that it uses, declares all the Components/Directives/Pipes/etc. that are used within the module, exposes some of those Components etc. to other modules, sets up the routing for the module, and sets up any "boostrap" components that can be used as the root Component.

There's two types of modules. First, there's your 'Root module', which is the entry point of your app. You can technically put everything in your app into just one module.

Then there's 'Feature modules', which are used for separation of concerns during development, but also for things like lazy-loading of parts of the app. This is more of an issue for larger apps, but it doing it early can certainly help you set things up "right".

Answer 3

Angular NgModules differ from and complement JavaScript (ES2015) modules. An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities. An NgModule can associate its components with related code, such as services, to form functional units.

An NgModule 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: Other modules whose exported classes are needed by component templates declared in this NgModule.

providers: Creators of services that this NgModule contributes to the global collection of services; they become accessible in all parts of the app. (You can also specify providers at the component level, which is often preferred.)

bootstrap: The main application view, called the root component, which hosts all other app views. Only the root NgModule should set the bootstrap property.

Answer 4

@NgModule is a new decorator added in RC5 that provides a number of useful features for both Angular’s core and developer ergonomics.

Basic NgModule usage looks like this:

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ MyComponent ],
  bootstrap: [ MyComponent ]
})
class MyAppModule {}

This decorator tells Angular two important things about your application:

declarations tell Angular that MyComponent belongs to the MyAppModule.

bootstrap advises Angular that when it creates this module at startup, and we want to automatically bootstrap MyComponent into the DOM.

Answer 5

From the docs

An NgModule is a class marked by the @NgModule decorator. @NgModule takes a metadata object that describes how to compile a component's template and how to create an injector at runtime. It identifies the module's own components, directives, and pipes, making some of them public, through the exports property, so that external components can use them. @NgModule can also add service providers to the application dependency injectors.

---

NgModule metadata does the following:

• Declares which components, directives, and pipes belong to the module.
• Makes some of those components, directives, and pipes public so that other module's component templates can use them.
• Imports other modules with the components, directives, and pipes that components in the current module need.
• Provides services that the other application components can use.