Using Angular modules in Ionic applications

April 15, 2017, 1:30 pm Categories:

Categories

Angular modules describe, through the use of the @NgModule decorator, how components, pipes and providers fit together to form the structure of an application.

The @NgModule decorator accomplishes this through use of a metadata object that instructs the compiler on how the application is to be built and launched.

Angular/Ionic applications use modules in the following ways:

  • Root module
  • Feature modules

Understanding the root module

By default ALL Angular/Ionic applications MUST have one root module, conventionally identified by the name AppModule, which is located at src/app/app.module.ts.

A typical root module for an Ionic application might look like the following:

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Here you can see that the necessary modules are imported first followed by the @NgModule metadata object which is used to define the root module through the following arrays:

  • declarations
  • imports
  • bootstrap
  • entryComponents
  • providers

Let's take a moment to look at each of these metadata arrays in depth and understand their purpose.

- declarations

Defines only the components, pipes and directives that belong to this module.

By default the root module lists the root component for the application inside this array.

- imports

Defines the modules whose exported components, directives and pipes should be available to templates in this module.

The BrowserModule helper class allows Ionic applications to be executed within a web browser and provides access to commonly used directives such as NgIf and NgFor.

The HttpModule provides access to all of Angular's Http service providers.

The IonicModule class enables the root component for the application to be bootstrapped by passing that to the forRoot method. The use of the forRoot method is only ever intended within the root module and ensures that all of the components, directives and providers for the framework are imported and made globally available.

- bootstrap

Defines the components to be bootstrapped when the module is bootstrapped.

This array simply contains the IonicApp module which is used to trigger the application bootstrapping process.

The AppModule itself is bootstrapped through the src/app/main.ts file.

- entryComponents

Defines the components that should be compiled for this module so they are available for page templates at runtime.

- providers

This simply lists all of the providers and Ionic Native packages for any plugins that the application will use.

Finally, the AppModule class is exported so that this is made globally available to the application (I.e. for bootstrapping through the src/app/main.ts file).

In summary then, all applications must have a root module which is used to define the application level modules and components for bootstrapping.

Feature Modules

A feature module allows an application to be structured into various blocks of functionality so that components, directives, pipes and providers are able to be 'lazy loaded' for specific sections of the application.

This will typically take place through the presence of a dedicated module associated with each component generated for the application (when using the Ionic CLI to generate a new page component a feature module for that component is automatically created).

For example we could generate a src/pages/home/home.module.ts file for the HomePage component like so:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
  ],
  exports: [
    HomePage
  ]
})
export class HomePageModule {}

Similar to the application root module we use the @NgModule decorator to define the metadata object for this feature module.

Unlike the application root module though we implement an exports array which is used to list the directives/pipes/modules that are able to be used within the template of any component that is part of an Angular module that imports this Angular module.

This basically means we import the specified component once and then have that immediately available anywhere that this feature module is imported.

Pretty cool huh?

Within Ionic a feature module also enables, through using the IonicPageModule class, bootstrapping of a child page (in the above example this would be the HomePage component) making that available for routing.

Notice that a feature module uses the forChild method to bootstrap page components while a root module uses forRoot instead?

The use of the forChild method allows the specified page component to be 'lazy-loaded' for the application instead of being globally loaded through the root module (which also has the added benefit of reducing application build sizes and loading times).

We could, if we needed to, also import and declare further components, directives, pipes and services for use with a specific feature module allowing us to fine-tune the structure of our application (I.e. loading only what we need when and where its actually needed).

In Summary

Modules allow the different components, directives, pipes and providers of an Ionic application to be structured in a series of blocks or units through use of Angular's NgModule class.

This class provides the @NgModule decorator allowing modules to be created through a metadata object.

Each application must contain a root module which is responsible for bootstrapping the application and providing details of the root component.

Additional feature modules are able to be created which subsequently allow for the lazy loading of page components as and where required.

Currently the team at Ionic are exploring how feature modules are best structured within applications so there's a chance we might see some refinements and suggestions for best practice approaches on this particular front. 

Until then though have fun playing with this often overlooked and under utilised feature of Ionic/Angular development.

I hope you enjoyed this article and please feel free to share your thoughts, findings or suggestions in the comment section below.

If you enjoyed what you've read here then please sign up to my mailing list and, if you haven't done so already, take a look at my e-book: Mastering Ionic for further information about using Modules and lazy loading within Ionic.

 

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

Top