Create and Import Module in Ionic 2

Things move around often in the ongoing development of the Ionic 2 Framework. Although the framework draws its lifeblood from Angular 2, a few changes happen here and there, which can be annoying. In this article, let’s look at how to create and import a module in Ionic 2.

My first post after quitting my full time job (Over 2 billion + 1 reasons why). Hopefully, with a bit of time on my hands, I’ll be frequent with posts. Hopefully!

We’ll consider how creating a module happens in Angular 2 native, and how to adapt the same thing to work for Ionic 2.

Before we do, please consider the specs below as my system information on which this article is based on. I trust things my move around eventually in about 2 seconds after this article is published, so be aware of the specs below:

My system information:

Cordova CLI: 6.4.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.39
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04.1 LTS
Node Version: v5.12.0

The take away in the above nonsense is the Ionic Framework Version number. This article is based on the 2.0.0-rc.2

Although a 2.0.0-rc-2 was used for the discussion below, the same approach applies to Ionic 2 Final.

AuthModule

In my recent AngularFire2 Authentication tutorial, we created a module for the Authentication part of our Single-Page App (SPA).

I want to borrow a bit of snippet from that article on how a module is created in native Angular 2 and see how to transform that to merge with Ionic 2.

auth.module.ts (Angular 2)

import { NgModule }      from '@angular/core';
import { FormsModule } from '@angular/forms';
 
import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';
 
@NgModule({
  imports:      [ 
    authRouting,
    FormsModule
   ],
  declarations: [ 
    SignupComponent,
    LoginComponent
  ]
})
export class AuthModule { }

What you see above is probably the minimum a module can get. In the auth.module.ts, we’re making sure we have the ngModule decorator available to use.

Then we call in our routes specific for this AuthModule . Check the AngularFire2 Authentication article to learn more about the routing.

the NgModule decorator comes with metadata, and in Angular 2, the above example shows the imports and declarations metadata arrays.

The imports take external modules and exports we want available in the current module.

Then we declare the components that play with the current module in the declarations part.

auth.module.ts (Ionic 2)

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { IonicModule } from 'ionic-angular';

import { LoginComponent, SignupComponent } from './auth.component';

@NgModule({
  imports:      [ 
    FormsModule,
    CommonModule,
    IonicModule.forRoot(LoginComponent),
    IonicModule.forRoot(RegisterComponent)
   ],
  declarations: [ 
    RegisterComponent,
    LoginComponent
  ],
  exports: [
    RegisterComponent,
    LoginComponent
  ]
})
export class AuthModule { }

Noticed the differences?

Of course, we’re making use of the IonicModule.forRoot( ) . If you don’t pass your components through the .forRoot() method of the IonicModule you’re gonna see error relating to unexpected component-name error.

Or you could replace this part (as per article here: https://forum.ionicframework.com/t/rc-0-how-do-you-import-export-modules-into-your-app/65168/13)

IonicModule.forRoot(LoginComponent),
IonicModule.forRoot(RegisterComponent)

with this

IonicModule

Then eventually, within your app.module.ts, you can bring in AuthModule like so:

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { AuthModule } from '../auth/authModule';

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    AuthModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: []
})
export class AppModule {}

Conclusion

So there you have it. Some slight changes in there. I hope the above difference helps you get up and running with Ionic 2, embracing the changes.

What are you waiting for! Turn on the Hadron Collider, and get Ionizing!

AuthModule

auth.module.ts (Angular 2)

auth.module.ts (Ionic 2)

Conclusion

More Ionic 2 Articles