angular: Angular http client not working with translation on in IOS chrome browser

🐞 bug report

Description

I have angular project built in angular 10. I am getting issue in calling api from IOS chrome browser when i turn on google translation from browser.

If i do not turn on translation it is giving me correct response for API

However when i turn on translation i am getting this error.

InvalidAccessError The object does not support the operation or argument

Error is happening only when i do translation from browser if i do translation from settings in Iphone the it is working fine.

and it is also working fine in all browsers in laptop.

If use javascript fetch function instead of angular HttpClient then it is working fine with HttpClient request is not even going to server. It is giving error even before sending request.

I tried to reproduce same issue in stackblitz but if i create any app on stackblitz than translate button is disabled there. You can see this stackblitz app created by me - https://angular-9-starter-gf561h.stackblitz.io/

translate-screenshot

You can see in stackblitz this trnaslate option in dislabled. but it is enabled in my local app. And once i click on that button than httpClient stops working

To Regenerate issue

Install latest angular app
add any httpClient service in app
run app and open in. Iphone chrome
Api call will stop working after clicking on translate button in IOS chrome.

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

Angular Version:




10.0.0

Anything else relevant?

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 15
Comments: 19 (7 by maintainers)

Most upvoted comments

Any workaround for this bug, even though it is caused by chrome ios? Or are there a angular fix for this as well?

Edit: I added this to my index.html file just to see if it works and indeed it seems to work. The code is from chrome’s ios fix linked above.

if (typeof XMLHttpRequest.prototype.realOpen === 'undefined') {
    XMLHttpRequest.prototype.realOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
      this.savedMethod = method;
      this.savedUrl = url;
      this.savedAsync = async;
      this.savedUser = user;
      this.savedPassword = password;
      const realAsync = arguments.length > 2 ? async : true;
      this.realOpen(method, url, realAsync, user, password);
    };
  }

henninga on Aug 8, 2022

I have only seen this on error on these clients:

Chrome Mobile iOS 103.0
Chrome Mobile iOS 102.0
Mobile Safari 15.5

You can reproduce it using the Getting Started repo. I forked the repo, recreated the lock file using node 16, then deployed using Vercel. On Chrome iOS 15.5 I went to https://angular-getting-started-xi.vercel.app/welcome, translated to some language, then clicked on “Product List”.

If I don’t translate, I get the list of products.

Site: https://angular-getting-started-xi.vercel.app/welcome Repo: https://github.com/teug91/Angular-GettingStarted

teug91 on Jul 8, 2022

also experiencing this with the latest angular version, using IOS + Chrome

electrofLy on May 31, 2022

@petebacondarwin , I checked ti today with native XmlHttpRequest request. Native XmlHttpRequest is working event after translation in IOS chrome, while Angular HttpClient is not working.

vinitsingh64 on Mar 13, 2021

+1 still happening it seems (iOS 14.8 with Google browser)

hisham on Sep 22, 2023

I have encountered the same problems too. But I don’t think it is Angular’s bug, I may think it is ios chrome’s translation bug. And I have submit a bug to chromium and described my reason, see: https://bugs.chromium.org/p/chromium/issues/detail?id=1346628

For anyone who is also interested in this problem, you can upvote this chromium issue, so that the chromium team can tell whether it is a chromium bug or not.

This chromium bug has been confirmed and fixed. What caused this bug is that:

But when translation is enabled, if we call XMLHttpRequest.prototype.open(method, url), iOS chrome will change it to XMLHttpRequest.prototype.open(method, url, undefined). But if we call XMLHttpRequest.prototype.open(method, url, true) explicitly, it works as expected.

Although the chromium bug has been fixed, but for previous iOS chrome, it still exists. Is it good to send a PR to add a true async parameter for XMLHttpRequest.prototype.open method in Angular ?

Zuckjet on Jul 29, 2022

The same issue occurred in my app. Disabling of translate extension and everything works fine. IOS + Chrome. I tried only Angular HTTP client.

Passarinho4 on Feb 7, 2021