Всем доброго времени суток! Перевожу приложение с компонентного подхода на модульный. Натолкнулся

Question

Всем доброго времени суток! Перевожу приложение с компонентного подхода на модульный. Натолкнулся

на проблему с маршрутизацией и не как не могу понять в чем же дело.
Вот часть маршрута приложения:
const routes: Routes = [
{
path: '',
component: MainComponent,
canActivate: [AuthGuard],
canActivateChild: [AuthGuard],
children: [
{
path: 'administration',
loadChildren: () => import('@app/modules').then(m => m.AdministrationModule),
},
{
path: '',
component: HomeComponent,
}
]
},
{
path: 'login',
loadChildren: () => import('@app/modules').then(m => m.LoginModule),
canActivate: [NonAuthGuard]
},
{path: '**', redirectTo: ''}
];
Все компоненты "независимые", так и нужно оставить всё.
Ожидаю что по пути "localhost" отобразится HomeComponent.
А по пути "localhost/administration" главная страница модуля AdministrationModule.
Но вот тут все перепуталось, почемуто по пути "localhost" отображается модуль AdministrationModule, причем как бы "сам по себе", минуя наследование MainComponent...
Может кто нибудь объяснить в чем причина такого поведения?
P.S. Вложенных компонент, разбитых по вложенным путям, очень много в данном приложении, очень важно понять как это все перевести на модули правильно, с точки зрения роутинга.