We are currently working on a project using Ionic 4 along with Angular framework. One of the issues we are facing is related to logging into the application.
Below is a screenshot illustrating the error:
Here is the snippet of my code:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
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: '',
redirectTo: '/tabs/tab2',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tabs/tab2',
pathMatch: 'full'
}
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
Although I am not a believer in magic, I made an interesting observation while troubleshooting the issue. It seems that simply by editing the import paths in the loadChildren sections has an impact on the application's behavior. For instance:
../tab3/tab3.module#Tab3PageModule -> ./tab3/tab3.module#Tab3PageModule
After making such changes and saving the file, attempting to log in results in the same problem. However, when I revert the changes back like this:
./tab3/tab3.module#Tab3PageModule -> ../tab3/tab3.module#Tab3PageModule
I save the file again, try to log in once more, and everything seems to work smoothly. This particular issue is causing troubles particularly when trying to compile for ios.