Using @IonicPage (lazy loading) pages loads by default a page


#1

Hi, we are using from the beginning LazyLoading and the new IoniPage decorator in our app. Now we think we have discovered a new bug or something we simple don’t understand.

Our app.module.ts is something like that:

...
@NgModule({
    declarations: [
        MyApp
    ],
    imports: [
        BrowserModule,
        HttpModule,
        IonicModule.forRoot(MyApp, {
            preloadModules: true
      })
    ],
    bootstrap: [
        IonicApp
    ],
    entryComponents: [
        MyApp
    ],
....

our app.component.ts is something like that

@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    rootPage: string;

    constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
        this.initializeApp();
    }

    initializeApp() {
        this.platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            this.statusBar.styleDefault();
            this.splashScreen.hide();

            // this.rootPage = 'MainPage';
        });
  }
}

as you can see the MainPage would not be loaded it is commented, so at startup we would have a blank page and the constructor of MainPage is not loaded. Now we uncomment this.rootPage = 'MainPage'; and live reload does reload the page, and now the MainPage is shown, but the problem is the constructor is called twice time.
Next step we do, we re comment the this.rootPage = 'MainPage'; the page does a reload and page is still loaded and the constructor is loaded one time. So this is a very strange thing!

some ideas?

cli packages: (/usr/lib/node_modules)
    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:
    Cordova CLI : 7.0.1 

local packages:
    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.0

System:
    Android SDK Tools : 26.0.2
    Node              : v6.11.2
    npm               : 5.3.0 
    OS                : Linux 4.10

#2

Production code will not comment and uncomment any code. Is this relevant at all? What real problem are you trying to replicate by doing this?


#3

I think @mburger81 try to explains that using Live Reload and Lazy Loding at the same time produce strange behavior.

The first time the app is launched : all is fine.
Change something in the code, save : Live Reload reload only the last page on the screen, reset all Providers and finally load app.component.ts.

Behavior : the last page’s constructor is called twice (first time with no data from providers) and log some kind of errors in console.

This append only in debug mode, but it is very annoying when I check some interface changes, especially on the Home page !


#4

This was a bug on should be resolved from a while. So folks upgrade your ionic dependency :slight_smile: