'Could not resolve module... relative to...' Error when compiling the app

Question

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 https://github.com/angular/angular-cli/issues/8641 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. EDIT: The Problem even still occurs when I delete the whole service folder with all the connections.

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

Answer 1

Based on the information you have provided I can see that the module the error messages refers to (ServiceModule) doesn't look incorrect:

{ path: 'services', loadChildren: './services/services.module#ServicesPageModule' },

This means that its one of two things:

1. that file doesn't exist - look in your directories and confirm that /services/services.module.ts exists
2. you have renamed the file at some point but not renamed the code inside - check that there is an export class ServicesPageModule {} inside the /services/services.module.ts file

(Update) What is a service?

Following on from your comments it seems you don't know what the service page is in your project.

An Angular Service is a class that you can inject into components so that you can re-use and share logic/data between parts of the app and enforce clean separation of concerns.

That's not what we are talking about here.

According to your routing file, at some point, you have generated a page called services. Or you have just put that line in there yourself?

If you don't have a services page then this line shouldn't be in there so just remove it.

If you do have a services page then it needs to match the path and module name, like I have explained above.