Ionic 3 Lazy Loading - No Component Factory

Question

For an ionic-3 project we are using LAZY LOADING. Our Module " LOGIN " is being lazy loaded. Everything works fine but when we try to use NAV CONTROLLER for navigating between pages INSIDE the LAZILY LOADED module - we get the RUNTIME ERROR "NO COMPONENT FACTORY"

Code Below

login.ts

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { NavController } from 'ionic-angular';
import {DummyPage} from './dummy';

@IonicPage()
@Component({
  templateUrl: 'login.html'
})
export class LoginPage {

  

  constructor(public navCtrl: NavController) 
  {

  }

  buttonClick()
  {
      this.navCtrl.push(DummyPage)
  }

}

login.module.ts

import {ModuleWithProviders, NgModule, Optional, SkipSelf }       from '@angular/core';
import { CommonModule }      from '@angular/common';
import { IonicPageModule } from 'ionic-angular';
import {LoginPage} from './login';
import {DummyPage} from './dummy';

@NgModule({
  imports:      [ CommonModule, IonicPageModule.forChild(LoginPage) ],
  declarations: [LoginPage, DummyPage],
  exports:      [ LoginPage, DummyPage ],
  providers:    [  ]
})

/* core module is imported once and is made
applicable through the app. Application wide singleton services
like user authentication etc. are defined here */

export class LoginModule {
}

DUMMY.TS is the page that is INSIDE the LOGIN Module and I don't want to create a separate NG MODULe for it - hence using the navController. This how ever throws an error

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { NavController } from 'ionic-angular';


@Component({
  template:'<h1> AWWWW </h1>'
})
export class DummyPage {

  

  constructor(public navCtrl: NavController) 
  {

  }

  buttonClick()
  {
    alert("Hello world");
  }

}

As seen above, I have added DUMMY.TS in the ngModule and entryComponents

The ERROR IS:

Havent tried this but try IonicPageModule.forChild(DummyPage) in imports — Suraj Rao
– Suraj Rao, Commented May 4, 2017 at 12:23
Am sorry this solution feed the problem but added another. If I added IonicPageModule.forChild(DummyPage) it overwrites the LoginPage and doesn't let me load the LoginPage. — Shouvik S Mazumdar
– Shouvik S Mazumdar, Commented May 4, 2017 at 12:42
hmm.. I guess unless you set in app.module.ts, you cant add two pages in one page module.. — Suraj Rao
– Suraj Rao, Commented May 4, 2017 at 12:44

Shouvik S Mazumdar · Accepted Answer · 2017-05-04 13:33:51Z

1

Solution was to add a reference to this page in app.module.ts and add it in referencing

    import {DummyPage} from './login/dummy';
@NgModule({
  declarations: [MyApp, DummyPage],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [MyApp, DummyPage],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler }]
})
export class AppModule { }

Guess Ionic is treating the DummyPage as a dynamic loaded page and we need to tell the app.module.ts to compile it offline and create a factory for it for using when required.

answered May 4, 2017 at 13:33

Shouvik S Mazumdar

2052 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ramon Rambo Over a year ago

I do have the same problem, but I thought one purpose of the new modules is that you dont have to add the page in the very top 'declarations' and 'entryComponents'. I dont think this is the right way to do it...

Pal Over a year ago

This works for an old project! However it is not necessary for newly created project with ionic 3.

Bhargav Rao · Accepted Answer · 2017-08-17 11:55:42Z

1

You need to add a dummy.module.ts in the dummy folder, which will solve the problem.

Do take a look at the related github project.

edited Aug 17, 2017 at 11:55

Bhargav Rao

52.6k29 gold badges130 silver badges142 bronze badges

answered Jul 18, 2017 at 1:54

laker

1431 gold badge1 silver badge6 bronze badges

1 Comment

yi peng Over a year ago

I had the same issue. and it did cost me a lot of time. thanks for @laker's answer. it did help me a lot. Aactually. you just need to treat dummy as a module. then you can call the modal with the module-name pass to it. then everything just works fine.

Gabriel Angelo · Accepted Answer · 2017-08-17 17:22:36Z

-1

Have you tried call with strings ?

buttonClick() {
    this.navCtrl.push('DummyPage')
}

answered Aug 17, 2017 at 17:22

Gabriel Angelo

193 bronze badges

Collectives™ on Stack Overflow

Ionic 3 Lazy Loading - No Component Factory

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related