Angular - How to resolve `Property 'redirectTo' comes from an index signature, so it must be accessed with ['redirectTo'].`

Question

I upgraded my Angular code to Angular-15. Then I have this code:

REDIRECTGUARD:

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Router } from '@angular/router';

@Injectable({
providedIn: 'root'
})
export class RedirectGuardService {

constructor(private router: Router) { }
canActivate(routeSnapshot: ActivatedRouteSnapshot): boolean | Promise<boolean> | Promise<boolean> | boolean {
this.router.navigateByUrl(routeSnapshot.data.redirectTo, {skipLocationChange: true});
return true;
}
}

Then I got this error:

Property 'redirectTo' comes from an index signature, so it must be accessed with ['redirectTo'].

Does this answer your question? [Angular - CanActivate is deprecated. How to replace it?](https://stackoverflow.com/questions/75564717/angular-canactivate-is-deprecated-how-to-replace-it) — TotallyNewb, Apr 12 '23 at 08:54
I don't see any issues upon importing your code in [Stacblitz](https://stackblitz.com/edit/angular-ivy-czhvh4?file=src/app/app.component.ts). Could you try and reproduce the error using this sample? — Cuzy, Apr 12 '23 at 08:54

score 0 · Accepted Answer · answered Apr 12 '23 at 08:58

Typings for Router have been changed, and your TypeScript compiler does not like this line this.router.navigateByUrl(routeSnapshot.data.redirectTo, {skipLocationChange: true}); return true; } } - you should change it to this.router.navigateByUrl(routeSnapshot.data['redirectTo'], {skipLocationChange: true}); return true; } }

Angular - How to resolve `Property 'redirectTo' comes from an index signature, so it must be accessed with ['redirectTo'].`

1 Answers1