angular reroutes only on site refresh with feature module

Question

I have the following routes in my app-routing.module.ts.

  {
    path: 'abc',
    children: [
      {
        path: 'foo',
        pathMatch: 'full',
        redirectTo: 'foo/bar',
      },
      {
        path: 'foo',
        loadChildren: () =>
          import('./features/foo/foo.module').then((m) => m.FooModule),
        data: { title: 'Foo' },
      },
    ]
  }

So when I redirect myself to abc/foo in the menu for example, I would expect to be redirected to foo/bar, but instead i get stuck at foo and only on a refresh of the site it redirects me to abc/foo/bar. No console log errors, how do I debug something like that? I am using angular 10. I can see the feature module being loaded correctly when targeting the foo route.

This is my foo.module.ts:

const routes: Routes = [
  { path: 'bar', component: BarComponent},
  { path: '**', redirectTo: '' },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class FooRoutingModule {}

It will work if you change path where you perform lazy loading module to `bar` and in the actual `FooRountingModule` change the path for `BarComponent` to be empty string — , Jul 08 '21 at 08:49

score 1 · Answer 1 · answered Jul 08 '21 at 09:02

1

Okay, I enabled tracing to debug the routing issue: (which I didnt know about) How to trace routing in Angular 2?

and the problem was that my menu routing had a typo and routed to foo/barr.

answered Jul 08 '21 at 09:02

M4V3N

600
6
21

score 0 · Answer 2 · answered Jul 08 '21 at 08:49

Your second child named path: 'foo', just make it path: 'foo/bar'. I have marked it down as <===== this line. So the reason is you are redirecting to foo/bar, but it can't find any foo/bar initially. It will hopefully resolve your error

 {
    path: 'abc', 
    children: [
      {
        path: 'foo',
        pathMatch: 'full',
        redirectTo: 'foo/bar',
      },
      {
        path: 'foo/bar',  <======= this line, change it to "foo/bar"
        loadChildren: () =>
          import('./features/foo/foo.module').then((m) => m.FooModule),
        data: { title: 'Foo' },
      },
    ]
  }

angular reroutes only on site refresh with feature module

2 Answers2