Ionic 3 ,lazy loading pages


#1

Hi,when i use ionic 3 lazy loading page,i just do it follow the demo,but a error occur:

Runtime Error
Uncaught (in promise): Error: Cannot find module '../pages/home/home.module'. Error: Cannot find module '../pages/home/home.module'. at webpackEmptyContext (http://localhost:8100/build/main.js:74030:8) at loadAndCompile (http://localhost:8100/build/main.js:73119:36) at NgModuleLoader.load (http://localhost:8100/build/main.js:73084:83) at ModuleLoader.load (http://localhost:8100/build/main.js:54758:44) at DeepLinker.getNavLinkComponent (http://localhost:8100/build/main.js:26281:39) at DeepLinker.getComponentFromName (http://localhost:8100/build/main.js:26264:25) at getComponent (http://localhost:8100/build/main.js:29339:23) at convertToView (http://localhost:8100/build/main.js:29357:16) at convertToViews (http://localhost:8100/build/main.js:29376:32) at NavControllerBase._loadLazyLoading (http://localhost:8100/build/main.js:43086:108)
Stack
Error: Uncaught (in promise): Error: Cannot find module '../pages/home/home.module'.
Error: Cannot find module '../pages/home/home.module'.
    at webpackEmptyContext (http://localhost:8100/build/main.js:74030:8)
    at loadAndCompile (http://localhost:8100/build/main.js:73119:36)
    at NgModuleLoader.load (http://localhost:8100/build/main.js:73084:83)
    at ModuleLoader.load (http://localhost:8100/build/main.js:54758:44)
    at DeepLinker.getNavLinkComponent (http://localhost:8100/build/main.js:26281:39)
    at DeepLinker.getComponentFromName (http://localhost:8100/build/main.js:26264:25)
    at getComponent (http://localhost:8100/build/main.js:29339:23)
    at convertToView (http://localhost:8100/build/main.js:29357:16)
    at convertToViews (http://localhost:8100/build/main.js:29376:32)
    at NavControllerBase._loadLazyLoading (http://localhost:8100/build/main.js:43086:108)
    at c (http://localhost:8100/build/polyfills.js:3:12642)
    at Object.reject (http://localhost:8100/build/polyfills.js:3:11998)
    at NavControllerBase._fireError (http://localhost:8100/build/main.js:42996:16)
    at NavControllerBase._failed (http://localhost:8100/build/main.js:42984:14)
    at http://localhost:8100/build/main.js:43039:59
    at t.invoke (http://localhost:8100/build/polyfills.js:3:8488)
    at Object.onInvoke (http://localhost:8100/build/main.js:4403:37)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:8428)
    at r.run (http://localhost:8100/build/polyfills.js:3:3686)
    at http://localhost:8100/build/polyfills.js:3:13183
Ionic Framework: 3.2.1
Ionic App Scripts: 1.3.7
Angular Core: 4.1.0
Angular Compiler CLI: 4.1.0
Node: 6.10.3
OS Platform: Windows 10
Navigator Platform: Win32

#2

Need a little more info than that to be sure of the problem, but make sure you’ve got a home.module.ts file in the same folder as your home.ts component file.


#3

Yes.

home.ts

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

@IonicPage()

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
// import { HomePage } from '../pages/home/home';

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

app.component.ts

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

// import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = 'HomePage';

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    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.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

#4

@lloydv can you tell me what’s wrong with me ? thx!!!


#5

Gotta admit it looks good to me. I’m really new to lazy loading though, maybe somebody else can see something.


#6

sorry,sorry,i don’t know what’s wrong with me!!..now who can help me about this thinks very much!!!


#7

You should import your home.module to your app.module and add it to your imports.


#8

i modify it as your say,what’s wrong with me?

Runtime Error
Cannot find module “…/pages/home”

my app.module.ts is

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePageModule} from '../pages/home';
@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    HomePageModule,
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

#9

I hope there’s nothing wrong with you. But I think you should import the module like this (look at the file name you’re trying to import!)

import { HomePageModule} from ‘…/pages/home /home.module

you were trying to import the entire map, that’s not going to work. You should target the module.


#10

I’m pretty certain that it is not required to add lazily loaded page modules to the app module. I think OP’s issue is caused by a bad relative path somewhere; an import of “…/pages/home/home.module” from somewhere from which that is not a valid path.


#11

yes ,when i did it ,nothing changed;
this is a demo code,all of code i modified like up,can you give me same sugguestion?


#12

i move my code to another computer,everything is ok ,i really do’t known what’s wrong with my computer??