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:
@NgModuleprovides 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
IonicModuleto 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
declarationsarray should list all components, directives, and pipes that your application uses (nothing else)
importsarray should list all modules that should be included in the application
entryComponentsarray should list all components that are dynamically loaded, like pages. The
entryComponentsarray should not just be a duplicate of
declarations(although sometimes it may be)
providersarray should list all providers that the application uses