Let's say the AppModule is the root module of the app. Its routing file looks like this:

...
const appRoutes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  {
    path: 'auth',
    loadChildren: './modules/auth/auth.module#AuthModule',
  }
]
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

AuthModule routing file looks like this:

...
const authRoutes: Routes = [
  {
    path: '',
    loadChildren: './login/login.module#LoginModule',
  },
  {
    path: 'registration',
    loadChildren: './registration/registration.module#RegistrationModule'
  }
];
export const authRouting: ModuleWithProviders = RouterModule.forChild(authRoutes);

Everything works fine when LoginModule routing file looks like this:

const loginRoutes: Routes = [
  { path: '', component: LoginStep1Component },
  { path: 'a', component: LoginStep2Component }
];
export const loginRouting: ModuleWithProviders = RouterModule.forChild(loginRoutes);

But some troubles appear when I try to use some base component to wrap Login components via <router-outlet> having the router file as following:

const loginRoutes: Routes = [
  {
    path: '',
    component: LoginComponent,
    children: [
      { path: '', component: LoginStep1Component, pathMatch: "full" /*tried also without pathMatch*/ },
      { path: 'a', component: LoginStep2Component }
    ]
  }
];

The localhost:4200/auth works fine displaying the LoginStep1Component.

But localhost:4200/auth/a doesn't work. I can't access it and view LoginStep2Component neither via link navigation nor via URL bar of the browser.

I have also tried to replace '' with some path but it didn't help either. I don't consider this as a proper solution.