Default route module gets loaded with every other modules

Question

I have set the my lazy loaded Home module to empty path. But now problem is whenever I try to load different modules e.g login by its url like /new/auth, the home module also get load along with it.

const routes: Routes = [
  {
    path: '', component: MainLayoutComponent,
    children: [
      {
        path: '',
        loadChildren: './homepage/homepage.module#HomepageModule'
      },
      {
        path: 'new/auth',
        loadChildren: './auth/auth.module#AuthModule'
      },
    }
 }

As I made my home page module lazy loaded so I expect that the home module should load on empty path only. But its loading with every route.

I checked everywhere like app module or any other root modules, and there is no import of home module.

Answer 1

Order of the items in the children array matters.

Try

const routes: Routes = [
  {
    path: '', component: MainLayoutComponent,
    children: [
     {
        path: 'new/auth',
        loadChildren: './auth/auth.module#AuthModule'
      },
      {
        path: '',
        loadChildren: './homepage/homepage.module#HomepageModule'
      },
    }
 }