How do you import a Component that is exported by a Feature Module?

Ionic Framework ionic-v3
1

I’m still trying to understand the angular2 module concept. I’m playing with the tabs starter and tried to make all the /pages a separate PagesModule module.

src/pages/pages.module.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AgmCoreModule } from 'angular2-google-maps/core/core-module';
import { IonicModule } from 'ionic-angular';

import { MyApp } from '../app/app.component';
import { AboutPage } from './about/about';
import { ContactPage } from './contact/contact';
import { HomePage } from './home/home';
import { TabsPage } from './tabs/tabs';

@NgModule({
  imports: [
    CommonModule,                   // for ng2 directives
    IonicModule.forRoot(TabsPage),  // root for PagesModule
  ],
  declarations: [
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  exports: [
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: []
})
export class PagesModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: PagesModule,
      providers: [ ]
    };
  }
}

But I need to use TabsPage as the root in the AppModule and Typescript but I’m getting various "No Component Factory Found..." errors.

app/app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

// import { TabsPage } from '../pages/tabs/tabs';
import { PagesModule } from '../pages/pages.module';

@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
  rootPage = TabsPage;         // this is exported from the PagesModule, but it's not found here

  constructor(platform: Platform) {
    platform.ready().then(() => {
    });
  }
}

app/app.module.ts

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 { TabsPage } from '../pages/tabs/tabs';
import { PagesModule } from '../pages/pages.module';


@NgModule({
  declarations: [
    MyApp,
    // AboutPage,
    // ContactPage,
    // HomePage,
    // TabsPage                 // how do I declare TabsPage from the PagesModule here?
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    PagesModule.forRoot(),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    // AboutPage,
    // ContactPage,
    // HomePage,
    // TabsPage
  ],
  providers: []
})
export class AppModule {}

How do I declare TabsPage from the PagesModule here in the AppModule so I can use it in MyApp? Or is the answer that MyApp must belong to the PagesModule?

2

change your app.module.ts if this could help
from
bootstrap: [IonicApp], to
bootstrap :[IonicApp, {imports :[PagesModule ]}]

or
bootstrap:[IonicApp, PagesModule]

3

That did not fix it. I tried both ways, here are the results:

bootstrap:[IonicApp, PagesModule]

// typescript compile
[13:29:18]  
14   rootPage = TabsPage;         // this comes from PagesModule
src/app/app.component.ts(14,14): error TS2304: Cannot find name 'TabsPage'.

// JS console
Uncaught Error: No Directive annotation found on PagesModule

What I want is to bootstrap : [IonicApp, TabsPages] where TabsPages is a component defined in PagesModule.

4

Hi,

I posted a solution on the other forum thread here.

-Dharsan