Menu

Understanding Angular modules (NgModule) and their scopes

November 8th, 2017

Understanding Angular modules (NgModule) and their scopes

☞ 

  #Angular

  • And it may seems heavy at first, but it actually saves you many lines of imports : in beta versions of Angular 2, you needed to import your components and directives every time you used them (good luck if you use UI modules like Material).
  • Because given the difference of scope between components and services :if the module is imported for components, you’ll need to import it in each module needing them ;if the module is imported for services, you’ll need to import it only once, in the first app module.If you fail to understand this, you’ll…
  • Here is an helpful summary.Modules to import each time you need themCommonModule (all the basics of Angular templating : bindings, *ngIf, *ngFor…), except in the first app module, because it’s already part of the BrowserModuleFormsModule / and UI modules (like PrimeNg)any other module giving you components, directives or pipesModules to import only onceHttpClientModule…
  • Because the first time in app module, forRoot() will give the router components and provide the router services.
  • Lazy-loaded modulesLast complication : if you lazy-load a module, which is now easy with Angular CLI.As it will be a different bundle and module, loaded only on demand by default, it’s not included in the global scope your app.For components, it doesn’t change anything : you need to import again the CommonModule…

NgModule is the first basic structure you meet when coding an app with Angular, but it’s also the most subtle and complex, because of different scopes. Angular documentation has done a whole FAQ…

Understanding Angular modules (NgModule) and their scopesThis post is about Angular 2  4.NgModule is the first basic structure you meet when coding an app with Angular, but it’s also the most subtle and complex, because of different scopes. Angular documentation has done a whole FAQ about NgModules, but it’s still quite a mess to teach this during courses, students are often confused, so I decided to sum it up in this post for everyone.A French version of this post is available here.Why NgModule ?It’s done automatically with Angular CLI, but the first thing you have to do in Angular is to load a root NgModule :The purpose of a NgModule is to declare each thing you create in Angular. There is two kind of main structures :“declarations” is for things you’ll use in your templates : mainly components (~ views : the classes displaying data), but also directives and pipes ;“providers” is for services (~ models : the classes getting and handling data).Why do we need to register everything ? NgModule was a structure introduced lately in the RC phase of Angular 2. First, it seemed unnecessary complexity, as it feels redundant with ES6 imports. But now we’re used to it, you can rejoice : it allows Ahead of Time (AoT) compilation, which is amazing for performance. And it may seems heavy at first, but it actually saves you many lines of imports : in beta versions of Angular 2, you needed to import your components and directives every time you used them (good luck if you use UI modules like…

Understanding Angular modules (NgModule) and their scopes