RC.0: How do you import/export modules into your app?

Ionic Framework ionic-v3
13

Following are my changes and it works for me.

Add home.module.ts to home folder with contents:

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

@NgModule({
  imports:[IonicModule],  //no forRoot here
  declarations:[HomePage],
  exports:[HomePage],
  entryComponents:[HomePage]  //<-- add all your module components to here
})
export class HomeModule{

}

Add contact.module.ts to contact folder with contents:

import {NgModule} from '@angular/core';
import {ContactPage} from "./contact";
import {IonicModule} from 'ionic-angular'

@NgModule({
  imports:[IonicModule],
  declarations:[ContactPage],
  exports:[ContactPage],
  entryComponents:[ContactPage]
})
export class ContactModule{

}

Add about.module.ts to about folder with contents:

import {NgModule} from '@angular/core';
import {AboutPage} from "./about";
import {IonicModule} from 'ionic-angular'

@NgModule({
  imports:[IonicModule],
  declarations:[AboutPage],
  exports:[AboutPage],
  entryComponents:[AboutPage]
})
export class AboutModule{

}

Add tabs.module.ts to folder tabs with contents:

import {NgModule} from '@angular/core';
import {IonicModule} from 'ionic-angular'
import {TabsPage} from "./tabs";
import {HomeModule} from '../home/home.module';
import {AboutModule} from '../about/about.module';
import {ContactModule} from '../contact/contact.module';

@NgModule({
  imports:[IonicModule, HomeModule, AboutModule, ContactModule],  //<--no forRoot here and add HomeModule,AboutModule,ContactModule
  declarations:[TabsPage],
  exports:[TabsPage],
  entryComponents:[TabsPage]  //<--add all your module components to here
})
export class TabsModule{

}

Update app.nodule.ts in folder app:

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
//import { AboutPage } from '../pages/about/about';
//import { ContactPage } from '../pages/contact/contact';
//import { HomePage } from '../pages/home/home';
//import {HomeModule} from '../pages/home/home.module'; //<--no need child level module
import { TabsModule } from '../pages/tabs/tabs.module'; //<--import top level module only

@NgModule({
  declarations: [
    MyApp,
    //AboutPage,
    //ContactPage,
    //HomePage,
    //TabsPage
  ],
  imports: [
    TabsModule, //<-- top level module only
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    //AboutPage,
    //ContactPage,
    //HomePage,
    //TabsPage
  ],
  providers: []
})
export class AppModule {}
4 Likes