CODEWITHSUNDEEP
angularionic3
Shouvik S Mazumdar
Shouvik S Mazumdar

Reputation: 205

Ionic 3 Lazy Loading - No Component Factory

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: Error Snippet

Upvotes: 7

Views: 2549

Answers (3)

Gabriel Angelo
Gabriel Angelo

Reputation: 19

Have you tried call with strings ?

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

Upvotes: -1

laker
laker

Reputation: 143

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.

Upvotes: 1

Shouvik S Mazumdar
Shouvik S Mazumdar

Reputation: 205

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.

Upvotes: 1

Related Questions