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:

AuthModule

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)

Angular 2 Module Example

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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

]

})

exportclassAuthModule{}

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)

Ionic 2 module example

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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

]

})

exportclassAuthModule{}

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)

Ionic 2 module example

1

2

IonicModule.forRoot(LoginComponent),

IonicModule.forRoot(RegisterComponent)

with this

Ionic 2 module example

1

IonicModule

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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:[]

})

exportclassAppModule{}

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!