Ionic 3 ,lazy loading pages

Ionic Framework ionic-v3
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.

image
image.png1195×566 45.3 KB

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??