When I compile my ionic 4 app I get this error:
ERROR in Could not resolve module ./services/services.module relative to app/app-routing.module.ts
and the simulation does not start. However, if I change something in my code and I compile once again, the code compiles successfully. I looked up that it probably has something to do with the paths (absolute/relative). But in these questions the solution was using relative paths Lazy loading of modules giving error · Issue #8641 · angular/angular-cli · GitHub or in this question Angular 4 - Could not resolve submodule for routing. Since I’m already using relative paths I don’t know what to do. My folder structure in this app is => src/app/pages or services.
router.module.ts
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: 'one',
children: [
{
path: '',
loadChildren: '../one/one.module#OnePageModule'
}
]
},
{
path: 'two',
children: [
{
path: '',
loadChildren: '../two/two.module#TwoPageModule'
}
]
},
{
path: 'three',
children: [
{
path: '',
loadChildren: '../three/three.module#ThreePageModule'
}
]
},
{
path: 'four',
children: [
{
path: '',
loadChildren: '../four/four.module#FourPageModule'
}
]
},
{
path: 'five',
children: [
{
path: '',
loadChildren: '../five/five.module#FivePageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/one',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/one',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: 'one', loadChildren: './one/one.module#OnePageModule' },
{ path: 'filter', loadChildren: './filter/filter.module#FilterPageModule' },
{ path: 'four', loadChildren: './four/four.module#FourPageModule' },
{ path: 'key', loadChildren: './key/key.module#KeyPageModule' },
{ path: 'test', loadChildren: './test/test.module#TestPageModule' },
{ path: 'notifications', loadChildren: './notifications/notifications.module#NotificationsPageModule' },
{ path: 'three', loadChildren: './three/three.module#ThreePageModule' },
{ path: 'five', loadChildren: './five/five.module#FivePageModule' },
{ path: 'two', loadChildren: './two/two.module#TwoPageModule' },
{ path: 'services', loadChildren: './services/services.module#ServicesPageModule' },
{ path: 'settings', loadChildren: './settings/settings.module#SettingsPageModule' },
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'signup', loadChildren: './signup/signup.module#SignupPageModule' },
{ path: 'friprofile', loadChildren: './friprofile/friprofile.module#FriprofilePageModule' },
{ path: 'four/:id', loadChildren: './four-details/four-details.module#FourDetailsPageModule' },
{ path: 'two-details', loadChildren: './two-details/two-details.module#TwoDetailsPageModule' },
{ path: 'choose', loadChildren: './choose/choose.module#ChoosePageModule' },
{ path: 'camfilter', loadChildren: './camfilter/camfilter.module#CamfilterPageModule' }
//Changed from four-details -> four/:id
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}