Tuesday, 13 March, 2018 UTC


Summary

  • 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…
  • 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 / ReactiveFormsModuleMatXModule and other UI modulesany other module giving you components, directives or pipesModules to import or NoopAnimationsModuleany other module providing…
  • Routing files are automatically generated by Angular CLI, but you may have noticed there is a subtle difference between the routing of your first app module and the routing of submodules.
  • Because the first time in app module, forRoot() will give the router components and provide the router services.
  • new HTML tags : if they were global, loading two libraries creating components with the same name would create conflicts.SummaryYour tree of imports(which is not exactly the same as your directories) should look like this : – Architecture in Angular projectsWant to know how to structure your own module in your Angular app ?…
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…
@mscavazzin: “Understanding #Angular modules (NgModule) and their scopes” by @cyrilletuzi
Understanding Angular modules (NgModule) and their scopesThis post is about Angular 2, 4  5.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, and group them together (like Java packages or PHP / C# namespaces).
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).NgModule and scopes / visibilityThe confusion starts with declarations and providers not having the same scope / visibility :
declarations / components are in local scope (private visibility) ;providers / services are (generally) in global scope (public visibility).It means the components you declared are only usable in the current module. If you need to use them outside, in other modules, you’ll have to export them :
On the…
Understanding Angular modules (NgModule) and their scopes