Can't reach user component using -> [routerLink]=“ '/profile/ ' + currentUser.id”

Question

I have set in app-routing.module.ts

{path: 'profile:/userId', component: ProfileComponent, canActivate:[AuthGuard]},
// In case the address doesn't match our paths ,redirects to login
{path: '**', redirectTo: 'login'}

any uknown path word will to redirect me to the login page, but this also happening when i click on profile on the navbar button.

Instead of getting to the profile.componennt.html view it goes to log in. Any idea why is that happening?

 <a [routerLink]="'/profile/' + currentUser.id" class="nav-link">Profile</a>

Answer 1

For two reasons it might redirect to the login page:

1- Your AuthGuard fails and it redirects to the login page

2- The path is not correct in routes

{path: 'profile/:userId', component: ProfileComponent, canActivate:[AuthGuard]},
{path: '**', redirectTo: 'login'}