CODEWITHSUNDEEP
androidangularcordovaionic-framework
guitarlive
guitarlive

Reputation: 11

ionic3/angular4 Lazy loading Don't work

CLI:

node -v 6.11.2 
cordova -v 6.5.0
ionic -v 3.9.2

Create an ionic tabs project with only the homepage(Manually deleted):

ionic start demo1 tabs

then create two pages use the cmd:

ionic g page Oneself
ionic g page Setting

this is app.module.ts code:

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
//import { SettingPage } from "../pages/setting/setting";
//import { OneselfPage } from "../pages/oneself/oneself";

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

this is oneself.module.ts like this:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { OneselfPage } from './oneself';

@NgModule({
  declarations: [
    OneselfPage,
  ],
  imports: [
    IonicPageModule.forChild(OneselfPage),
  ],
  exports:[
    OneselfPage
  ]

})
export class OneselfPageModule {}

this is oneself.ts File Code like this:

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

/**
 * Generated class for the OneselfPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-oneself',
  templateUrl: 'oneself.html',
})
export class OneselfPage {
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad OneselfPage');
  }
}

SettingPage Same as above；

this is tabs.ts code :

import { Component } from '@angular/core';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = "OneselfPage";//class name
  tab3Root = "SettingPage";//class name 
  constructor() {
    
  }
}

I know that lazy loading has several key points, such as declaring @ionicpage (), @ngmodule, IonicPageModule. ForChild (pageName)... I have such declarations in my code, but lazy loads don't work and the errors are as follows:

This is the first line error, and I don't know if it's related to lazy loading 

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

The following error must have something to do with lazy loading :

Error {rejection: Error, promise: t, zone: r, task: t, stack: <accessor>, …}
message: "Uncaught (in promise): Error: Cannot find module '../pages/oneself/oneself.module'.
Error: Cannot find module '../pages/oneself/oneself.module'
 at file:///android_asset/www/build/main.js:65357:9
    at t.invoke

See screen capture : https://i.sstatic.net/AGTVN.jpg

Can someone help me answer this question?

Upvotes: 0

Views: 538

Answers (2)

guitarlive
guitarlive

Reputation: 11

Problem solved, the cordova ionic installed with cnpm has the problem,dont use cnpm install , use npm install ,the lazy load is run.

Upvotes: 1

Garrett Barlocker
Garrett Barlocker

Reputation: 703

CLI:

node -v 8.2.1
cordova -v 7.0.1
ionic -v 3.9.2

I have followed what you have described

ionic start demo1 tabs
ionic g page Oneself
ionic g page Setting

I was unable to reproduce any of the errors that you were stating

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

or

Error {rejection: Error, promise: t, zone: r, task: t, stack: <accessor>, …} message: "Uncaught (in promise): Error: Cannot find module '../pages/oneself/oneself.module'. Error: Cannot find module '../pages/oneself/oneself.module' at file:///android_asset/www/build/main.js:65357:9 at t.invoke

If you want to compare against my reproduction of your scenario you can do so, hope this helps

Upvotes: 0

Related Questions