Search code examples
ionic4

Ionic 4 tabs stop working every time after restarting "ionic serve"


The problem is that each time i fix my tabs they start working but if i restart my server i get the following error

RROR Error: Uncaught (in promise): Error: Cannot find module '../tab1/tab1.module' Error: Cannot find module '../tab1/tab1.module'

I have done everything i know

This is my Tabs-routing.module.ts:

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

import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children:[
      {
        path:'tab1',
        children:[
          {
          path:'',
          loadChildren:'../tab1/tab1.module#Tab1PageModule'
        }
        ]
      },
       {
        path:'tab2',
        children:[
          {
          path:'',
          loadChildren:'../tab2/tab2.module#Tab2PageModule'
        }
        ]
      },
       {
        path:'tab3',
        children:[
          {
          path:'',
          loadChildren:'../tab3/tab3.module#Tab3PageModule'
        }
        ]
      },
       {
        path:'tab4',
        children:[
          {
          path:'',
          loadChildren:'../tab4/tab4.module#Tab4PageModule'
        }
        ]
      },
       {
        path:'tab5',
        children:[
          {
          path:'',
          loadChildren:'../tab5/tab5.module#Tab5PageModule'
        }
        ]
      },{
    path:'',
    redirectTo: './tabs/tab1',
    pathMatch:'full'
  }
    ]
  },{
    path:'',
    redirectTo: './tabs/tab1',
    pathMatch:'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class TabsPageRoutingModule {}


Solution

  • Try to change the loadChildren path:

    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
          }
        ]
      }]
    

    Or Try importing 'Tab1PageModule' in tabs.module.ts:

    import { TabsPage } from './tabs.page';
    import {Tab1PageModule} from '../tab1/tab1.module'; <-- Add this line
    @NgModule({
      imports: [
        Tab1PageModule <-- Add this line
      ]
    })