Angular 5 Routing - Empty Path not Matching

Question

I am confused what's wrong with this routing...

app.module.routing:

...
  {
    path: 'path1',
    canActivate: [Path1Guard],
    loadChildren: './path1/path1.module#Path1Module',
  },

path1.routing.module:

const path1Routes: Routes = [
  {
    path: '',
    component: AuthenticatedLayoutComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: Path1Component,
      },
    ],
   },
 ];

As far as I understand, navigating to /path1 should result here in AuthenticatedLayoutComponent being loaded, and then Path1Component being loaded in the router outlet of AuthenticatedLayoutComponent.

If I make the path more specific:

  const path1Routes: Routes = [
  {
    path: '',
    component: AuthenticatedLayoutComponent,
    children: [
      {
        path: 'subpath1',
        pathMatch: 'full',
        component: Path1Component,
      },
    ],
   },
 ];

... and navigate to /path1/subpath1, that is exactly what happens. Without the subpath, though, the Layout component loads but loads nothing in the router outlet. So what's wrong with the way I have it? Thanks.

Did you ever find a solution to this? I am also not able to get a child component to load if its path is empty and it sits inside a parent route defined with an empty path. — blomster
– blomster, Commented Oct 29, 2018 at 14:42
I had the same problem, and found a solution: stackoverflow.com/questions/53048807/… — blomster
– blomster, Commented Nov 8, 2018 at 17:44
@blomster If I understand your solution, you are suggesting to load the layout in the lazy load in the app.routing.module? Although this is old news and I've forgotten the details, I believe that is the approach I was trying to get away from as this specific module had routes requiring two different layouts. But thanks, I believe in the context of this question your solution works. — froodley
– froodley, Commented Nov 9, 2018 at 18:48
strangely now, I have another project, and I've just created routes with an empty child inside empty parent path, and it just worked. Strange. — blomster
– blomster, Commented Nov 20, 2018 at 8:24

Hugo Noro · Accepted Answer · 2018-03-04 15:53:08Z

3

I believe your problem will be solved if you set the configuration like this

const path1Routes: Routes = [
  {
     path: 'path1',
     component: AuthenticatedLayoutComponent,
     children: [
      {
        path: '',
        pathMatch: 'full',
        component: Path1Component,
      },
    ],
   },
 ];

You use empty paths when you want to instantiate a component without the need for defining a new url route.

If you leave both empty it would probably just try to resolve to the first one.

By setting the configuration as above it will recognise you are on the route you defined previously on the lazy loading and then it will load the child component because it will match the empty path

answered Mar 4, 2018 at 15:53

Hugo Noro

3,2732 gold badges16 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

froodley Over a year ago

This didn't work. I believe the path1 segment was already consumed by the app.routing.module. Thanks, though!

Hugo Noro Over a year ago

Mmmm. I will have a look and do some tests. I might have missed something. I’ll come back to you :)

Luca De Nardi Over a year ago

I had a similar case, my 'home' route was an empty string ('') and without pathMatch it would enter a loop where my route guard always tried to redirect to ''. Adding pathMatch to full solved the issue.

funkizer · Accepted Answer · 2018-03-04 16:23:48Z

1

All you need to do is remove pathMatch: 'full'

answered Mar 4, 2018 at 16:23

funkizer

4,9271 gold badge21 silver badges21 bronze badges

2 Comments

froodley Over a year ago

This didn't work. Shouldn't it be pathMatch: 'full'? I am trying to dictate that that component is loaded only if the complete path is /path1

funkizer Over a year ago

PathMatch isn't needed. Weird, I was almost sure I've done the same before but turns out I had one more level of lazyloading in between. This may even be an issue in Router. Is it out of the question to move AuthenticatedLayoutComponent to AppModule as path1 and load those children into that there? Or moving path1Component to another lazy module would be the other workaround...:)

Collectives™ on Stack Overflow

Angular 5 Routing - Empty Path not Matching

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related