Angular 5 Routing : Empty path inside empty path

2
votes

I'm using Angular 5, trying to load a empty-path child route into a empty-path parent layout route. The FullLayoutComponent always loads, and the WhyUsComponent component loads when I visit localhost:4200/why-us.

But I cannot get the FrontpageComponent to load when I visit localhost:4200

If I change the path for FrontPageComponent to front-page, it will load when I visit localhost:4200/front-page.

It seems like empty child path inside empty parent path doesn't work (i've tried all combinations of pathMatch btw)

I need to the FrontpageComponent to load at the root of my site, without any defined path.

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
       }
])
3
routingangular5
@Did my answer helped? – Progs
perhaps empty path child inside empty path parent doesn't work? this guy had problems also: stackoverflow.com/questions/49097006/… – blomster
I must say, this is quite frustrating, because I can't have a root page with a layout containing a child component, surely this must have been done somewhere, somehow by someone – blomster

3 Answers

1
votes

I managed to find a way that works, lazy loading

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

and in MyModule, I have my routes defined, including the root path with an empty string.

0
votes

Will the below work?

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
   }
])
0
votes

Try this:

    {
            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'
                }
            ]

        }

And this code below your routes in your routing module:

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