CODEWITHSUNDEEP
angulartypescriptwebfrontend
Nikita Ivanov
Nikita Ivanov

Reputation: 78

Angular 11: can't use query parameters

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,
  }
];

Upvotes: 0

Views: 1132

Answers (1)

Krunal Shah
Krunal Shah

Reputation: 863

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/

Upvotes: 2

Related Questions