question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: Ionic 4 lazy loaded route - module not found

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:8

github_iconTop GitHub Comments

5reactions
rizzla22commented, Apr 28, 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: () =>


  { path: 'login', loadChildren: () => LoginPageModule },    ```
0reactions
ionitron-bot[bot]commented, May 19, 2020
Read more comments on GitHub >

github_iconTop Results From Across the Web

bug: Ionic 4 lazy loaded route - module not found #18165
Im having a lot of issues with Ionic 4 and lazy loaded modules, for some reason it keeps reporting that the below login...
Read more >
Ionic 4 lazy loaded route - module not found
I recreated your error message just now by removing import { AppRoutingModule } from './app-routing.module'; then letting the CLI recompile ...
Read more >
Cannot find module "path to feature module" when lazy loading
On my app/app-routing.module.ts , The routes use loadChildren that references the filepath to my modules. App module uses RouterModule.forRoot ...
Read more >
Troubleshooting Angular routing
What if we use forRoot() in our lazy-loaded module? Well, Angular will respond with “Error: Uncaught (in promise): Error: RouterModule.forRoot() called twice.
Read more >
Angular Modules and NgModule - Complete Guide
A lazy-loaded Angular module works just like a feature module, but the difference is that by default, Angular creates a separate dependency ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found