Проблема с угловой маршрутизацией: не работает для http://localhost:4200/#access_token=MytokenValue

Question

Я получаю маршрут от почтовой аутентификации стороннего приложения. Маршрут выглядит следующим образом:http://localhost:4200/#access_token=dynamicTokenValue

Я настроил этот маршрут, как показано ниже, когда использовал Angular 11, и он работал как положено. После обновления до Angular 16 он перестал работать.{ path: 'access_token', data: { breadcrumb: 'ABC', }, redirectTo: 'mycomp', }

PS: У меня настроен путь «mycomp» с отложенной загрузкой (ESM).

Я попробовал ниже, но у меня это не сработало. Он обрабатывает «access_token=:id» как строку вместо того, чтобы рассматривать: id как динамическое значение.

{ path: 'access_token=:id', data: { breadcrumb: 'ABC', }, redirectTo: 'mycomp', }

Ниже приведены примеры: Работа в Angular 11:

https://stackblitz.com/edit/angualar-routing-in-angular-demo-example-yz3igv?file=src%2Fapp%2Fapp-routing.module.ts,src%2Fapp%2Fapp.module.ts

Рабочий маршрут: https://angualar-routing-in-angular-demo-example-yz3igv.stackblitz.io/#access_token=2332 .

Не работает в Angular 16:

https://stackblitz.com/edit/angular-erafn2?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp-routing.module.ts,src%2Fapp%2Fapp.comComponent.html

Не рабочий маршрут: https://angular-erafn2.stackblitz.io/#access_token=24224

Answer 1

Вы можете попробовать это исправление

Внутри ts-файла компонента приложения:-

        ngOnInit() {
    // Check if the 'access_token' query parameter is present in the URL
    const hashURL= location.hash.slice(1);
    const urlParams = new URLSearchParams(hashURL);

    if (urlParams.has('access_token')) {
      // Redirect to your file
      this.router.navigate(['/mycomp']);
    }
  }