Angular 11: can't use query parameters

Question

When I try to go 'localhost:4200/reset-password?token=asdsadas' Angular changes url to just 'localhost:4200/reset-password', so, I am not able to get query parameters from code.

Here is my routing settings:

const routes: Routes = [
  { path: '', redirectTo: '/register', pathMatch: 'full' },
  {
    path: 'login',
    component: LoginComponent,
    canActivate: [AnonymousGuard],
  },
  {
    path: 'register',
    component: RegisterComponent,
    canActivate: [AnonymousGuard],
  },
  {
    path: 'application',
    component: ApplicationFlowComponent,
    children: applicationFlowRoutes,
    canActivate: [AuthGuard],
  },
  {
    path: 'qflow',
    loadChildren: () => import('./questioneer-flow/questioneer-module.module').then((x) => x.QuestioneerModuleModule),
  },
  {
    path: 'reset-password-mail',
    component: ResetPasswordMailComponent,
  },
  {
    path: 'reset-password',
    component: ResetPasswordComponent,
    canActivate: [RequiredQueryParamsGuard],
    data: {
      requiredQueryParams: ['token']
    },
  },
  {
    path: 'oflow',
    component: OverviewAppFlowComponent,
  },
  {
    path: 'decline',
    component: DeclineComponent,
  }
];

Could you try using `localhost:4200/reset-password/?token=asdsadas`? — MaartenDev, Jul 29 '21 at 12:22
No, it redirects to simple localhost:4200/reset-password too — Nikita Ivanov, Jul 29 '21 at 12:25
Yes, it happens not only in one route. It happens with the whole application. — Nikita Ivanov, Jul 29 '21 at 12:31
Can you reproduce the issue on stackblitz? Your route configuration looks good, so I assume it's either one of your guards (`RequiredQueryParamsGuard`?) or something else in your app. — TotallyNewb, Jul 29 '21 at 12:31
I deleted guards and still have this issue, so looks like the cause of problem is another part of application. — Nikita Ivanov, Jul 29 '21 at 12:43
Maybe this can help: https://stackoverflow.com/questions/48552993/angular-5-remove-query-param, if not.. Try set the url from `reset-password` to `reset-password/:token` and get it with `route.params.subscribe` — Hoch, Jul 29 '21 at 13:06
Yes, your right, it will work, but it's interesting why query params arent work. — Nikita Ivanov, Jul 29 '21 at 13:16

score 2 · Accepted Answer · answered Jul 29 '21 at 13:22

Change your reset password route in your routing file as below : -

{
    path: 'reset-password/:token',
    component: ResetPasswordComponent,
    canActivate: [RequiredQueryParamsGuard],
    data: {
        requiredQueryParams: ['token']
    },
}

Hope this would solve your issue.

Re:Yes, it happens not only in one route. It happens with the whole application - To solve this issue I suggest you to Refer this and change your routes accordingly - https://www.tektutorialshub.com/angular/angular-passing-optional-query-parameters-to-route/

Angular 11: can't use query parameters

1 Answers1