Incorrect functioning of routes in Angular

Question

When trying to navigate from 'users' to 'users/:id' like this

this.router.navigate([`/users/${userId}`]);

or

this.router.navigate(['/users', userId]);

it stays on 'users' but url in browser bar changes to 'users/{correct_id}'

Application structure:

dashboard (/)
login (/login)
users (/users)
- users/id (/users:id)

I suspect the problem lies in my routes but unfortunately I can't find it.

app-routing.module.ts:

const routes: Routes = [
{
    path: '',
    component: DashboardComponent,
    loadChildren: (): Promise<DashboardModule> =>
        import('./dashboard/dashboard.module').then(
            (m: typeof import('./dashboard/dashboard.module')): DashboardModule => m.DashboardModule
        )
},
{
    path: 'login',
    component: LoginComponent,
    loadChildren: (): Promise<LoginModule> =>
        import('./login/login.module').then(
            (m: typeof import('./login/login.module')): LoginModule => m.LoginModule
        )
},
{
    path: 'users',
    component: UsersComponent,
    loadChildren: (): Promise<LoginModule> =>
        import('./users/users.module').then(
            (m: typeof import('./users/users.module')): UsersModule => m.UsersModule
        )
},
{
    path: '**',
    redirectTo: ''
}

];

users-routing.module.ts:

const routes: Routes = [
{
    path: '',
    component: UsersComponent,
},
{
    path: ':id',
    component: UserProfileComponent,
},

];

Kishan Vaishnani · Accepted Answer · 2022-05-14 09:45:27Z

There are two problems,

1st - You have used lazy loading feature so, you don't need to load component in main route

{
    path: 'users',
    component: UsersComponent, // <-- REMOVE it
    loadChildren: (): Promise<LoginModule> =>
        import('./users/users.module').then(
            (m: typeof import('./users/users.module')): UsersModule => m.UsersModule
        )
},

2nd - Then you also need to change in user module route like,

users-routing.module.ts:

const routes: Routes = [{
  path: '',
  children: [{
    path: '',
    component: UsersComponent,
  }, {
    path: ':id',
    component: UserProfileComponent
  }]
}];

Hope you are clear with this solution

akotech · Accepted Answer · 2022-05-14 09:22:44Z

The problem is probably in the following route:

{
  path: 'users',
  component: UsersComponent, // <-- HERE
  loadChildren: (): Promise<LoginModule> =>
    import('./users/users.module').then(
      (m: typeof import('./users/users.module')): UsersModule => m.UsersModule)
},

When you assign a component to a route, when that route matches, this component will always get rendered. And if it has children, they will get rendered in the <router-outlet> of that UserComponent template.

Since you also have the UserComponent assign to the children root path, I guess that's not the case.

To solve it you just need to remove the component line from the 'users' route.

{
  path: 'users',
  loadChildren: (): Promise<LoginModule> =>
    import('./users/users.module').then(
      (m: typeof import('./users/users.module')): UsersModule => m.UsersModule)
},

Cheers

Thank you sir for the clarification and solution! It was indeed enough to remove that line and the navigation works correctly.

gil · Accepted Answer · 2022-05-14 08:08:08Z

in your first attempt,

this.router.navigate([`${userId}`]);

you are trying to route based on a relative path, yet you don't provide the relativeTo property which is needed to route relative to the current path.

in your second attempt,

this.router.navigate([`${users/userId}`]);

you have few issues:

by not starting navigation with '/' the router thinks your'e trying to navigate relatively to the current route, which isn't the case.
your route string template is wrong (your'e trying to use variable users/userId which is clearly not what you meant), you should change it to:

this.router.navigate(['/users', ${userId}]);

Thank you for pointing out the issues, unfortunately after correcting them the problem did not go away, still despite changing the url to the correct view does not appear.

Metalgear · Accepted Answer · 2022-05-14 09:21:57Z

1

You should remove component setting in routes array.

const routes: Routes = [
    ...
    {
        path: 'users',
        // component: UsersComponent,                << remove this line
        loadChildren: (): Promise<LoginModule> =>
            import('./users/users.module').then(
                (m: typeof import('./users/users.module')): UsersModule => m.UsersModule
            )
    },
    ...
];

answered May 14, 2022 at 9:21

Metalgear

3,4771 gold badge9 silver badges19 bronze badges

Collectives™ on Stack Overflow

Incorrect functioning of routes in Angular

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Related