lazyloading nested module using Angular Ionic4 app not working properly?

Question

My app has a public routes like login, register as well as protected routes members. Member routes has a child routes of tabs. Tabs has some child routes categories, items etc. Whenever I run the ionic serve I get the following ERROR in Could not resolve module ./dashboard/dashboard.module relative to app/members/tabs/tabs-routing.module.ts

I have used the relative path while configuring the routes.

In the tsconfig.app.json file I have added the "baseUrl": "./"

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [],
    "baseUrl": "./"
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

This is my AppRoutingModule:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuardService } from './services/auth-guard.service';

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'register', loadChildren: './register/register.module#RegisterPageModule' },
  {
    path: 'members',
    loadChildren: './members/members-routing.module#MemberRoutingModule' ,
    canActivate : [AuthGuardService]
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This is my MemberRoutingModule:

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

const routes: Routes = [
    {
        path: '',
        redirectTo: 'members',
        pathMatch: 'full'
      },
    { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
    { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
    { path: 'logout', loadChildren: './logout/logout.module#LogoutPageModule' },
    { path: 'menu', loadChildren: './menu/menu.module#MenuPageModule' },
];

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

This is my TabsRoutingModule:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';


const routes: Routes = [
    {
        path: '',
        redirectTo: '/tabs/tabs/dashboard',
        pathMatch: 'full'
    },
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: 'dashboard',
                loadChildren: './dashboard/dashboard.module#DashboardPageModule'
            },
            {
                path: 'categories',
                children: [
                    {
                        path: '',
                        loadChildren: './categories/categories.module#CategoriesPageModule'
                    },
                    {
                        path: 'new-category',
                        loadChildren: './new-category/new-category.module#NewCategoryPageModule'
                    },
                    {
                        path: ':categoryId',
                        loadChildren: './category-details/category-details.module#CategoryDetailsPageModule'
                    }
                ]
            },
            {
                path: 'items',
                children: [
                    {
                        path: '',
                        loadChildren: './items/items.module#ItemsPageModule'
                    },
                    {
                        path: 'new-item',
                        loadChildren: './new-item/new-item.module#NewItemPageModule'
                    }
                ]
            },
            {
                path: '',
                redirectTo: '/tabs/tabs/dashboard',
                pathMatch: 'full'
            }

        ]
    }
];

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

This is my tabs.page.html

<ion-content>
  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="dashboard">
        <ion-label>Dashboard</ion-label>
        <ion-icon name="podium"></ion-icon>
      </ion-tab-button>
      <ion-tab-button tab="categories">
        <ion-label>Categories</ion-label>
        <ion-icon name="pricetags"></ion-icon>
      </ion-tab-button>
      <ion-tab-button tab="items">
        <ion-label>Items</ion-label>
        <ion-icon name="cash"></ion-icon>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>

It was working in the beginning then I restarted the app without any changes and now whenever I run the ionic-serve I get the below error where the lazyloading of the modules are not working. This is the error: "ERROR in Could not resolve module ./dashboard/dashboard.module relative to app/members/tabs/tabs-routing.module.ts"

Answer 1

I have solved the problem. Really it was just an error due to ionic couldn't locate the modules. The confusion was at first ionic was able to locate them properly. I was able to solve it using the path intellisence plugin in vscode by christian-kohler.path-intellisense . This is the link of the plugin https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense This is how the final routes looks like

const routes: Routes = [
{
    path: '',
    component: TabsPage,
    children: [
        {
            path: 'dashboard',
            loadChildren: '../dashboard/dashboard.module#DashboardPageModule'
        },
        {
            path: 'categories',
            children: [
                {
                    path: '',
                    loadChildren: '../categories/categories.module#CategoriesPageModule'
                },
                {
                    path: 'new-category',
                    loadChildren: '../new-category/new-category.module#NewCategoryPageModule'
                },
                {
                    path: 'edit/:id',
                    loadChildren: '../new-category/new-category.module#NewCategoryPageModule'
                },
                {
                    path: ':id/items',
                    children: [
                        {
                            path: '',
                            loadChildren: '../items/items.module#ItemsPageModule'
                        },
                        {
                            path: 'new-item',
                            loadChildren: '../new-item/new-item.module#NewItemPageModule'
                        },
                        {
                            path: 'edit/:itemId',
                            loadChildren: '../new-item/new-item.module#NewItemPageModule'
                        }
                    ]
                }
                // {
                //     path: ':id/new-item',
                //     loadChildren: '../new-item/new-item.module#NewItemPageModule'
                // },
                // {
                //     path: ':id/items',
                //     loadChildren: '../items/items.module#ItemsPageModule'
                // }
            ]
        },
        {
            path: 'category-details',
            loadChildren: '../category-details/category-details.module#CategoryDetailsPageModule'


        },
        {
            path: '',
            redirectTo: './tabs/dashboard',
            pathMatch: 'full'
        }

    ]
},
{
    path: '',
    redirectTo: '/tabs/dashboard',
    pathMatch: 'full'
}

];