Angular HttpClient Can Corrupt Large Numbers

Photo by Eric Prouzet on Unsplash

Problem

Let’s say, the API returns 638564648276578546 (a timestamp in C# ticks) to the Angular application. The Angular HttpClient parses the value into JSON and returns as 638564648276578600 to the caller. The JSON parse corrupts the large numbers. Please refer to this article for the reason: Why does JSON.parse corrupt large numbers and how to solve this?

There are two possible solutions. There can be more. Please let me know if you know more than these solutions.

Solution 1

The API returns the value inside the model than just returning the value itself.

public class Timestamp
{
    public string Value { get; set; }
}

Solution 2

Let the Angular HttpClient to parse the body as text. It will not corrupt the value. It’ll return 638564648276578546 to the caller.

For that, just add responseType: 'text'

return this.http.get(
  'URL', {
  responseType: 'text'
});

References for the further exploration:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
• https://github.com/angular/angular/issues/24942
• https://github.com/angular/angular/issues/21079#issuecomment-406023753
• https://github.com/angular/angular/issues/21079#issuecomment-769880581
• https://github.com/angular/angular/issues/18672