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.

score 13 · Accepted Answer · edited Oct 18 '17 at 14:18

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

Where it is recommended to put the other modules? Near the app.module.ts, are near the features it's related to? Thanks. — Guy, Nov 01 '17 at 08:09
@Guy We need to build an application in a modular structure. So dependent modules are injected to the corresponding feature main module. Example if you have one big feature then you can create a "main.module.ts" in the feature folder and inject other dependent modules in the "main.module.ts" — Libu Mathew, Nov 03 '17 at 11:11
Problem with this approach is `Module A` can call `Module B` but `Module B` cannot call `Module A`. In this case, you have to use a module where you will put all your services and create some shared components. — Portekoi, Oct 27 '18 at 09:00
@Portekoi You are right. We need to create something like core, shared etc... modules based on your project structure. Here I just explained just single versus multiple module. — Libu Mathew, Oct 27 '18 at 14:02

score 4 · Answer 2 · answered Sep 28 '16 at 19:56

4

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.

answered Sep 28 '16 at 19:56

Omri L

739
4
12

And would it also make sense to create a "StructureModule" that would contain components such as "HeaderComponent", "HomeComponent", "FooterComponent" (so basically, components that are forming the main design of the different pages of the website)? – ssougnez Sep 28 '16 at 19:59
I'd rather put these components under the "Common" module – Xpleria Oct 29 '18 at 16:24

One single NgModule versus multiples ones with Angular 2

2 Answers2

Linked