One single NgModule versus multiples ones with Angular 2

Question

I'm wondering if it's better to create one single module that contains all my angular 2 code or if it is better to split everything across multiple modules. For example, I'm creating my blog with Angular 2. So I have a "article-list" component and an "article" one. "article-list" calls a service that returns a list of articles then do a "ngFor" on it and inserts an "article" for each one.

The "article" component contains a "tag-list" component (that follows the same pattern as the "article-list" one, so I also have a "tag" component). For now, everything is in one module and it works quite well but here, I can see that they created a module for "heroes" related stuff, but I'm just wondering if it's really necessary.

Actually, I don't exactly know the cost of creating modules instead of just putting everything in the main one, so I'm struggling to know if I should continue with one module or create an "articles" module and a "tags" one.

Answer 1

Yes you can split your application into modules. This will decrease coupling between modules in the application. If you are building a large application it is important to dividing the application in to functional unit or module.

For example, your main module name is 'app.module'

The application consist of "Header", "Home", ..., "Footer" section.

In Header section you can create multiple components. Eg. link(routes) and search section, add this in to a module header. Similarly Home, Footer and other section contain associated modules.

For example, Home section is a large one that consist of many functionalities then we can create multiple modules and inject into the home main module say 'home.module'.

The below code is just an example that shows how to implement multiple modules in an Angular 2.

app.module.ts

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


import { AppComponent }   from './app.component';
import { HeaderModule }   from './header.module';

@NgModule({
  imports:      [ 
    BrowserModule,
    HeaderModule
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

header.module.ts

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

import {
  InputTextModule, 
  ButtonModule,
  DataTableModule,
  SharedModule
} from 'primeng/primeng';

import { HeaderComponent }   from './header.component';
import { UploadFileComponent }   from './upload-file.component';


@NgModule({
  imports:      [
    CommonModule,
    FormsModule,
    HttpModule,
    InputTextModule,
    ButtonModule,
    DataTableModule,
    SharedModule
  ],
  declarations: [
    HeaderComponent,
    UploadFileComponent
  ],
  exports: [ 
    HeaderComponent 
  ]
})

export class HeaderModule { }

Just refer angular2 ngmodule documentation

Answer 2

You should strive to split your application into modules according to your features.

• Angular modules make it easier to isolate,test and re-use features.
• Angular modules make it easy to lazy load routable features.

If we would stick with Angular tutorial example: It will make sense to group all heroes under HeroesModule and the villains under VillainsModule. Secondly, if you have Common functionality that is related to both of them and other modules in your app , you can create another module e.g. CommonModule.

For instance, Angular 2 itself ships with Common module that provides basic functionality such as NgFor and NgIf directives.