Angular 5 Routing: пустой путь внутри пустого пути

Question

Я использую Angular 5, пытаюсь загрузить дочерний маршрут с пустым путем в маршрут родительского макета с пустым путем. FullLayoutComponent всегда загружается, а компонент WhyUsComponent загружается, когда я посещаю localhost: 4200 / why-us.

Но я не могу загрузить FrontpageComponent при посещении localhost: 4200

Если я изменю путь для FrontPageComponent на front-page, он будет загружаться при посещении localhost: 4200 / front-page.

Кажется, что пустой дочерний путь внутри пустого родительского пути не работает (я пробовал все комбинации pathMatch, кстати)

Мне нужно, чтобы FrontpageComponent загружался в корне моего сайта без указания пути.

RouterModule.forRoot([
        {
            path: '',
            component: FullLayoutComponent,
            children: [
                {
                    path: '',
                    component: FrontpageComponent,
                    pathMatch: 'full',
                    data: {
                        meta: {
                            title: '',
                            description: ''
                        }
                    }
                },
                {
                    path: 'why-us', component: WhyUsComponent, pathMatch: 'full',
                    data: {
                        meta: {
                            title: 'Why Us?',
                            description: 'Why would you choose us? '
                        }
                    }
                }] // close children
       }
])

Answer 1

Попробуйте это:

    {
            path:'',
            pathMatch: 'prefix',
  //this will load your page in the router inside your main page        
            children:[
                    {
                    path: '',
                    component: FrontpageComponent,
                    pathMatch: 'full' 
                },
//This will load your main component
                {
                    path: '',
                    component: FullLayoutComponent
                },
                {
                    path: 'why-us',
                    component: WhyUsComponent,
                    pathMatch: 'full'
                }
            ]

        }

А этот код под вашими маршрутами в вашем модуле маршрутизации:

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: [ {
        provide: LocationStrategy, 
        useClass: PathLocationStrategy} ]
})

Answer 2

Мне удалось найти способ, который работает, ленивая загрузка

RouterModule.forRoot([
        {
            path: '',
            component: FullLayoutComponent,
            loadChildren: 'path/to/my.module#MyModule'
}

и в MyModule у меня определены маршруты, включая корневой путь с пустой строкой.

Answer 3

Будет ли работать нижеследующее?

RouterModule.forRoot([
    {
        path: '',
        component: FullLayoutComponent,
        children: [
            {
                path: '',
                redirectTo: 'front-page'
                component: FrontpageComponent,
                pathMatch: 'full',
                data: {
                    meta: {
                        title: '',
                        description: ''
                    }
                }
            },
            {
                path: 'front-page',
                component: FrontpageComponent,
                pathMatch: 'full',
                data: {
                    meta: {
                        title: '',
                        description: ''
                    }
                }
            },
            {
                path: 'why-us', component: WhyUsComponent, pathMatch: 'full',
                data: {
                    meta: {
                        title: 'Why Us?',
                        description: 'Why would you choose us? '
                    }
                }
            }] // close children
   }
])