An Introduction to NgModule for Ionic 2

We all use it, it’s a critical part of our applications structure, but I think a lot of people are confused by what exactly it is and what it does. I’m talking about the @NgModule in the app.module.ts file in an Ionic 2 application.

In short, using modules allows us to organise our application into cohesive blocks of functionality. All applications will have a root module which will define dependencies like the components, directives, pipes, and providers that the application will use, and also any other modules that the application should import.

One example of a module we always use (and it is usually the only additional module aside from the root module) in Ionic 2 applications is IonicModule. We import this into our root module, and by doing that we automatically gain access to all of Ionic’s many components and directives. The module handles importing and declaring all of the Ionic specific stuff for us, so we don’t need to manually import the List component, or the Slides component into our own root module every time we want to use them.

In this video tutorial, I explain a little bit of the theory behind modules and I cover what you need to know in order to correctly add your own dependencies to the app.module.ts file.

Here’s the video:

Video Notes

@NgModule provides a way to organise your application into cohesive blocks of functionality
Any dependencies added to a module that is included in the application will be made available to the application
All applications must have at least one root module, but you can use multiple modules in your application if you wish
All of the Ionic components and directives are made available to your application (without having to import them individually) by adding the IonicModule to the application
You could create your own module to provide a common set of components etc. to your application without having to import each of them individually
The declarations array should list all components, directives, and pipes that your application uses (nothing else)
The imports array should list all modules that should be included in the application
The entryComponents array should list all components that are dynamically loaded, like pages. The entryComponents array should not just be a duplicate of declarations (although sometimes it may be)
The providers array should list all providers that the application uses