После перенаправления OAuth с хешем Angular SPA не загружает svg, если следующий http-вызов завершается неудачно с параметрами состояния 0, conn отказано? странный крайний случай

Question

Нормальное поведение

Пользователь щелкает значок Google, получает перенаправление в Google Oauth, успешно входит в систему, перенаправляется с информацией о состоянии обратно в Angular SPA. SPA обрабатывает хэш в состоянии и принимает токен доступа, чтобы сделать HTTP-запрос к нашей собственной конечной точке REST для аутентификации.

Триггер

Если наше приложение REST не работает, этот запрос с токеном доступа не выполнит запрос OPTIONS с status 0: Connection Refused, а затем вызовет HTTP Error status 0. Эта ошибка обрабатывается блоком catchError, и пользователь получает уведомление об этом. Проблема решена

Ошибка

Теперь странная часть: когда в приведенном выше сценарии происходит перенаправление со страницы Google OAuth, значки SVG, которые есть в моем приложении, становятся пустыми. Кнопки все еще работают и отображаются там, теги [img] также работают, строго значки svg.

Теперь мой вход в Oauth для Microsoft обрабатывается всплывающим окном, а не перенаправлением, и когда тот же сценарий не выполняется,определения svg хороши.

SVG

У меня есть многократно используемый компонент следующим образом:

icon.ts

  location: string;

  constructor(
    @Optional() @Inject(REQUEST) private request: any,
    @Inject(PLATFORM_ID) private platformId: object
  ) {
    if (isPlatformServer(this.platformId)) {
      this.location = this.request.get('host');
    } else {
      this.location = window.location.href;
    }
  }

  @Input() name: string;
  @Input() size: string;

icon.html

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  [style.width]="size"
  [style.height]="size"
>
  <use
    [style.fill]="color ? color : 'white'"
    [attr.xlink:href]="location + '#' + name"
  ></use>
</svg>

, а сами определения находятся в пустом компоненте, загруженном в корень с display:none

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
    <symbol id="icon-name" viewBox="0 0 512 512">
<<<<<<actual svg code stuff>>>>>>>
    </symbol>
</defs>
</svg>

Теперь мое лучшее предположение:что-то связанное с тем, как URL получается в icon.ts из-за хэша, но из-за того, что я возился с ним, мне не удалось заставить его работать.

Answer 1

Теперь я разделяю абсолютный URL, чтобы удалить все после запуска хеша:

  location: string;

  constructor(
    @Optional() @Inject(REQUEST) private request: any,
    @Inject(PLATFORM_ID) private platformId: object
  ) {
    if (isPlatformServer(this.platformId)) {
      this.location = this.request.get('host').split('#')[0];
    } else {
      this.location = window.location.href.split('#')[0];
    }
  }