empty path, lazy loading router problems with angular 5

Question

Using angular 5 with a main app.module.ts and app-routing.module.ts I got fully working setup like the following.

I tried to move the layout routes into the new layout-routing.module.ts so I would have similar structures as with the other modules but:

app-routing.module.ts

export const RootRoutes: Routes = [
  {
    path     : '',
    component: ResolveComponent,
    resolve  : {
      resolved: AppResolver
    },
    children: [

      /* using only the following: working method */
      {
        path       : '',
        component  : LayoutComponent,
        canActivate: [AuthGuard],
        children: [
          {
            path        : 'dashboard',
            loadChildren: 'app/dashboard/dashboard.module#DashboardModule'
          },
        ]
      },

      /* using this instead results in error: Component ResolveComponent is not part of any
         module */
      {
        path        : '',
        loadChildren: 'app/layout/layout.module#LayoutModule'
      },






      {
        path        : 'signin',
        loadChildren: 'app/public/public.module#PublicModule'
      },
      {
        path        : 'error',
        loadChildren: 'app/error/error.module#ErrorModule'
      }
    ]
  }
];

layout-routing.module.ts

export const LayoutRoutes: Routes = [
  {
    path       : '',
    component  : LayoutComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path        : 'dashboard',
        loadChildren: 'app/dashboard/dashboard.module#DashboardModule'
      }
    ]
  },
];

The new way gives me "component ResolveComponent not found in any module"? Am I missing something.

The component ResolveComponent is definitely declared in the app.module which imports the above app-routing.module.

Why and how could the component now be missing if I only want to lazy load the layout.module?!

Answer 1

Sync loading the LayoutModule was the way to go ...

export const RootRoutes: Routes = [
  {
    path     : '',
    component: ResolveComponent,
    resolve  : {
      resolved: AppResolver
    },
    children: [
      {
        path        : '',
        loadChildren: () => LayoutModule
      },
      {
        path        : 'signin',
        loadChildren: 'app/public/public.module#PublicModule'
      }
    ]
  }
];