CODEWITHSUNDEEP
angular
rpmansion
rpmansion

Reputation: 2014

Angular route does not work when you have multiple routes in a module

I have two components in a module with their own route. However, only the first one works when testing the routes. Below is how I configure them.

foo-routing.module.ts

const routes: Routes = [
    {
      path: '',
      redirectTo: 'first',
      pathMatch: 'full'
    },
    {
      path: 'first',
      component: FirstComponent,
    },
    {
      path: 'second',
      component: SecondComponent
    }
];

app-routing.module.ts

const routes: Routes = [
  {
    path: 'foo',
    loadChildren: () =>
      import('src/app/foo/foo.module').then(m => m.FooModule)
  },
  {
    path: APP_ROUTES.DASHBOARD,
    loadChildren: () => import('src/app/dashboard/dashboard.module').then(m => m.DashboardModule)
  }
  // Fallback when no prior route is matched
  { path: '**', redirectTo: '/dashboard' }
];

What am I doing wrong here? When I navigate to foo/first works okay but when I try foo/second it only redirect back to foo/first.

I also try changing the path to something like the below.

const routes: Routes = [
    {
      path: '',
      redirectTo: 'foo/first',
      pathMatch: 'full'
    },
    {
      path: 'foo/first',
      component: FirstComponent,
    },
    {
      path: 'foo/second',
      component: SecondComponent
    }
];

This does not also work.

Upvotes: 0

Views: 447

Answers (1)

Vasyl Sovyak
Vasyl Sovyak

Reputation: 519

// In FooRoutingModule 
const routes = [{ 
    path: '', 
    redirectTo: '/first', 
    pathMatch: 'full',
    children: [ 
        { 
            path: 'first', 
            component: FirstComponent 
        }, 
        { 
            path: 'second',
            component: SecondComponent 
        }]
}];

Upvotes: 1

Related Questions