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
– MaartenDev, Commented Jul 29, 2021 at 12:22
No, it redirects to simple localhost:4200/reset-password too — Nikita Ivanov
– Nikita Ivanov, Commented Jul 29, 2021 at 12:25
Yes, it happens not only in one route. It happens with the whole application. — Nikita Ivanov
– Nikita Ivanov, Commented Jul 29, 2021 at 12:31
Maybe this can help: stackoverflow.com/questions/48552993/…, if not.. Try set the url from reset-password to reset-password/:token and get it with route.params.subscribe — Hoch
– Hoch, Commented Jul 29, 2021 at 13:06

Krunal Shah · Accepted Answer · 2021-07-29 13:22:43Z

2

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/

answered Jul 29, 2021 at 13:22

Krunal Shah

8601 gold badge8 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 11: can't use query parameters

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related