bug: Ionic 4 lazy loaded route - module not found

[rizzla22]

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 {}

[rizzla22]

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]

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 ?

	// 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]

Potentially related
NativeScript/nativescript-dev-webpack#372
rails/webpacker#508

[rizzla22]

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: () =>

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

[dyabol]

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

[hdung912]

i have save issues but only for IOS :(

[ionitron-bot]

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]

Issue moved to: ionic-team/ionic-v3#1107