Ionic-framework: bug: Ionic 4 lazy loaded route - module not found

Created on 28 Apr 2019  路  8Comments  路  Source: ionic-team/ionic-framework

Im having a lot of issues with Ionic 4 and lazy loaded modules, for some reason it keeps reporting that the below login module cannot be found, if I edit the app-routing.module.ts file and save sometimes it finds it. anyone come across this issue yet and know how to fix ?

error in app.module.ts Error: Uncaught (in promise): Error: Cannot find module './pages/auth/login/login.module'
Error: Cannot find module './pages/auth/login/login.module'

// main app module

        import { ErrorHandler, NgModule } from '@angular/core';
        import { BrowserModule } from '@angular/platform-browser';
        import { RouteReuseStrategy } from '@angular/router';

        import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
        // AoT requires an exported function for factories
        export function HttpLoaderFactory(http: HttpClient) {
            return new TranslateHttpLoader(http, 'assets/i18n/')
        }



        class MyErrorHandler implements ErrorHandler {
        handleError(error) {
            console.log("error in app.module.ts", error);
        }
        }


        @NgModule({
        declarations: [AppComponent],
        entryComponents: [],
        imports: [ 
            BrowserModule,
            IonicModule.forRoot(),
            AppRoutingModule,
            HttpClientModule,
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient]
                }
            }),
            AngularFireModule.initializeApp({
            }),
            AngularFireDatabaseModule,
            // Put your custom imports below this line to make merges in Git easier   
            FormsModule,
            ReactiveFormsModule,
            ],   
        providers: [
                {provide: ErrorHandler, useClass: MyErrorHandler}, // had to add a custom error handler class here as IonicErrorHandler deprecated - 
                { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
        ],
        bootstrap: [AppComponent]
        })
        export class AppModule {}

// main Routes file lazy loading the login page that cant be found

        import { NgModule } from '@angular/core';
        import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

        const routes: Routes = [
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'login', loadChildren: './pages/auth/login/login.module#LoginPageModule' },
        { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
        ];

        @NgModule({
        imports: [
            RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
        ],
        exports: [RouterModule]
        })
        export class AppRoutingModule { }

// login lazyloaded module that cant be found

        import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
        import { FormsModule, ReactiveFormsModule } from '@angular/forms';
        import { Routes, RouterModule } from '@angular/router';
        import { TranslateModule} from "@ngx-translate/core"
        import { IonicModule } from '@ionic/angular';

        import { LoginPage } from './login.page';

        const routes: Routes = [
        {
            path: '',
            component: LoginPage
        }
        ];

        @NgModule({
        imports: [
            CommonModule,
            FormsModule,
            IonicModule,
            ReactiveFormsModule,    
            TranslateModule,
            RouterModule.forChild(routes)
        ],
        declarations: [LoginPage]
        })
        export class LoginPageModule {}
v3
Source
picture rizzla22
👍3

Most helpful comment

Work around for this seems to be this, any ideas why id love to know also whats the difference between the way you load children and loadChildren: () =>

```import { LoginPageModule } from "@pages/auth/login/login.module";

{ path: 'login', loadChildren: () => LoginPageModule }, ```

picture rizzla22 on 28 Apr 2019
👎3 👍2

All 8 comments

CLI 4.12.0

{
  "name": "demo",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "config": {
    "ionic_webpack": "./config/webpack.config.js"
  },
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/admob-free": "5.5.0",
    "@ionic-native/app-version": "5.5.0",
    "@ionic-native/base64-to-gallery": "5.5.0",
    "@ionic-native/camera": "5.5.0",
    "@ionic-native/clipboard": "5.5.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/device": "^5.5.0",
    "@ionic-native/diagnostic": "5.5.0",
    "@ionic-native/facebook": "5.5.0",
    "@ionic-native/file": "5.5.0",
    "@ionic-native/geolocation": "5.5.0",
    "@ionic-native/keyboard": "5.5.0",
    "@ionic-native/location-accuracy": "5.5.0",
    "@ionic-native/media": "5.5.0",
    "@ionic-native/network": "5.5.0",
    "@ionic-native/social-sharing": "5.5.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.1.0",
    "@ionic/pro": "2.0.4",
    "@ionic/storage": "2.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/parse": "1.11.0",
    "android-camera-permission": "^1.0.0",
    "angular2-image-upload": "^1.0.0-rc.2",
    "angular2-jwt": "^0.2.3",
    "angular2-swing": "0.14.0",
    "angularfire2": "^5.0.0-rc.11",
    "com.verso.cordova.clipboard": "^0.1.0",
    "cordova-android": "7.1.4",
    "cordova-android-support-gradle-release": "^3.0.0",
    "cordova-base64-to-gallery": "^4.1.2",
    "cordova-ios": "4.5.5",
    "cordova-plugin-device": "2.0.2",
    "core-js": "^2.5.4",
    "dateformat": "^3.0.3",
    "es6-promise-plugin": "^4.1.0",
    "firebase": "5.1.0",
    "ionic-angular": "3.9.5",
    "ionicons": "4.5.6",
    "ng-log": "1.2.0",
    "ng2-img-cropper": "^0.9.0",
    "ngx-stripe": "^7.2.0",
    "ngx-webcam": "^0.2.2",
    "node-emoji": "^1.8.1",
    "parse": "1.11.1",
    "parse-push-plugin": "1.0.8",
    "rxjs": "~6.5.1",
    "rxjs-compat": "^6.5.1",
    "sw-toolbox": "^3.6.0",
    "tslib": "^1.9.0",
    "twilio-video": "^2.0.0-beta8",
    "zone.js": "0.9.0"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.13.8",
    "@angular-devkit/build-angular": "~0.13.8",
    "@angular-devkit/core": "~7.3.8",
    "@angular-devkit/schematics": "~7.3.8",
    "@angular/cli": "~7.3.8",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.5.1",
    "@ionic/app-scripts": "^3.1.9",
    "@ionic/v4-migration-tslint": "^1.7.1",
    "@types/googlemaps": "^3.26.11",
    "@types/jasmine": "^3.3.12",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash": "^4.14.76",
    "@types/node": "^11.13.7",
    "@types/node-emoji": "^1.8.0",
    "angular2-template-loader": "^0.6.2",
    "cheerio": "^1.0.0-rc.1",
    "codelyzer": "~4.5.0",
    "connect": "^3.6.1",
    "csp-parse": "^0.0.2",
    "diff": "^4.0.1",
    "elementtree": "^0.1.7",
    "html-loader": "^0.5.5",
    "ionic": "^4.1.1",
    "ionic-mocks": "^1.0.4",
    "jasmine": "^3.4.0",
    "jasmine-core": "^3.4.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^4.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "karma-junit-reporter": "^1.2.0",
    "karma-mocha": "^1.3.0",
    "karma-mocha-reporter": "^2.2.3",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^3.0.5",
    "mocha": "^6.1.4",
    "node-sass": "^4.5.3",
    "null-loader": "^1.0.0",
    "phantomjs-prebuilt": "^2.1.14",
    "plist": "^3.0.1",
    "protractor": "^5.1.2",
    "shelljs": "^0.8.3",
    "ts-loader": "^5.4.3",
    "ts-node": "^8.1.0",
    "tslint": "~5.16.0",
    "typescript": "~3.1.6",
    "yargs": "^13.2.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-device": {}
    }
  }
}
rizzla22 picture rizzla22 on 28 Apr 2019

When generating components I have specified directories i.e page, page/auth/login etc

the full error in chrome is this: 

error in app.module.ts Error: Uncaught (in promise): Error: Cannot find module './pages/auth/login/login.module'
Error: Cannot find module './pages/auth/login/login.module'
    at $_lazy_route_resource lazy namespace object:5
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:17299)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:910
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at resolvePromise (zone.js:852)
    at resolvePromise (zone.js:809)
    at zone.js:913
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:502)
    at ZoneTask.invoke (zone.js:487)

I noticed this $_lazy_route_resource lazy namespace so clicked on it and it showed me this webpackEmptyAsyncContext error, do I need to do some webpack configurations to get my paths loaded ?

function webpackEmptyAsyncContext(req) { // Here Promise.resolve().then() is used instead of new Promise() to prevent // uncaught exception popping up in devtools return Promise.resolve().then(function() { var e = new Error("Cannot find module '" + req + "'"); e.code = 'MODULE_NOT_FOUND'; throw e; }); } webpackEmptyAsyncContext.keys = function() { return []; }; webpackEmptyAsyncContext.resolve = webpackEmptyAsyncContext; module.exports = webpackEmptyAsyncContext; webpackEmptyAsyncContext.id = "./src/$$_lazy_route_resource lazy recursive";

rizzla22 picture rizzla22 on 28 Apr 2019

Potentially related
https://github.com/NativeScript/nativescript-dev-webpack/issues/372
https://github.com/rails/webpacker/issues/508

rizzla22 picture rizzla22 on 28 Apr 2019

Work around for this seems to be this, any ideas why id love to know also whats the difference between the way you load children and loadChildren: () =>

```import { LoginPageModule } from "@pages/auth/login/login.module";

{ path: 'login', loadChildren: () => LoginPageModule }, ```

rizzla22 picture rizzla22 on 28 Apr 2019
👎3 👍2

Hi, i get same error when i add
{provide: ErrorHandler, useClass: MyErrorHandler},
to my app.module.ts

Try this: https://stackoverflow.com/questions/49140429/providing-angular-errorhandler-in-appmodule-cause-cannot-find-module-in-lazy

dyabol picture dyabol on 7 May 2019

i have save issues but only for IOS :(

hdung912 picture hdung912 on 30 Aug 2019

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

ionitron-bot[bot] picture ionitron-bot[bot] on 19 May 2020

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/1107

ionitron-bot[bot] picture ionitron-bot[bot] on 19 May 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

aslamj picture aslamj  路  3Comments
SebastianGiro picture SebastianGiro  路  3Comments
fdnhkj picture fdnhkj  路  3Comments
brandyscarney picture brandyscarney  路  3Comments
danbucholtz picture danbucholtz  路  3Comments