Multi data providers do not work correctly on safari 15.5

[KostyaTretyak]

Which @angular/* package(s) are the source of the bug?

router

Is this a regression?

I don't know that.

Description

On my website Angular calls two data providers like this:

const routes: Routes = [
  {
    path: '',
    component: PostComponent,
    resolve: {
      result1: ApiPostLeadResolver,
      result2: ApiPostBodyResolver,
    },
  };

In Google Chrome this code works correctly and in console you can see this two requests, but in Safari 15.5, Angular 13.3.8 calls only ApiPostLeadResolver and incorrectly set the result to this.activatedRoute.snapshot.data.result2.

Please provide a link to a minimal reproduction of the bug

I can't provide link to a minimal reproduction because here need use backend. But if you open website with DevTools in Chrome and in Safari you can see different during running HTTP requests to resolve the data providers.

Please provide the exception or error you saw

No exception

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 13.3.8
Node: 16.15.1
Package Manager: yarn 1.22.1
OS: linux x64

Angular: undefined
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1303.8
@angular-devkit/core         13.3.8
@angular-devkit/schematics   13.3.8
@schematics/angular          13.3.8
typescript                   4.7.4

Anything else?

This issue is actually reopened from this. @atscott closed it without explaining what information is missing.

[alan-agius4]

@KostyaTretyak, @atscott most likely was referring to the missing reproduction and ng version output. ng version can be run on any OS. Wiithout a reproduction this would be hard to action.

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[KostyaTretyak]

But reproduction and ng version not required in the template issue. And how I can provide reproduction without backend?

[KostyaTretyak]

I tried to reproduction, but it looks like for this issue need a real backend, not a module that simulates a backend.

[alan-agius4]

You shouldn't be needing the backend for a minimal repro, you can easily mock/simulate an HTTP operations.

import { of } from 'rxjs';
import { delay, first } from 'rxjs/operators';

of({/*response mock */}).pipe(
  delay(1000),
  first(),
);

[KostyaTretyak]

Ok. This reproduction works correctly for you on Safari 15.5? If you click to go to heroes, you see one hero or two? If only one - this is issue that I tried described here.

[KostyaTretyak]

For some reason, the example at https://stackblitz.com/ stopped working. Now I will try to create a repository with reproduction.

[KostyaTretyak]

I created a repository with the issue. Please run this app locally in Safari 15.5. (On stackblitz.com for some reason this example still not working)

[alan-agius4]

@KostyaTretyak, I am unable to replicate this locally.

[KostyaTretyak]

The problem can be viewed so far on this page from real life. If you open it in Safari and see that only one HTTP request is sent to the server, and when you open it in Chrome and see that two HTTP requests are sent, then the problem still exists. Maybe this issue can't be reproduction with a fake response from the backend like I did in the repository you just checked. Maybe a problem in the interaction of @angular/router and @angular/common/http.

Please help to solve this problem. Unfortunately, I don't have access to Safari to verify what I'm talking about, but five different people have already reported this problem. It exists objectively, because the same Angular application page should not work differently in two different browsers.

[lsap]

I am the one of 5 people mentioned. This page shows only JSON in the main part of the post in Safari (without the plugins or the extensions) Desktop 15.5 (17613.2.7.1.8).

[alan-agius4]

@KostyaTretyak and @lsap, I do understand that there might be an issue. But unfortunately without a minimal reproduction that showcases the problem this is not actionable from our end.

Providing a URL of a live application for us to debug, will definitely not going to work out for a number of reasons;

1. The application has a lot of code, which will take significant time to understand
2. We don't understand the business logic of your application
3. The bundle code is minified and obfuscate.

Hence to why a minimal reproduction is paramount.

[KostyaTretyak]

Ok, I'll try to figure out how to run this example with a real backend.

[JoostK]

I can reproduce using Safari 15.4, but I'm still unclear on where the culprit is. It's not multi resolvers, that's working as expected. The issue is timing sensitive, as putting a breakpoint in the resolver avoids the issue (so the HTTP requests are further apart), but when the issue does occur you'll observe the following:

Concretely, the response body of the first request is reused wholesale for the second request. This seems like a Safari bug, in particular because the URLs are the same and only the Content-Type header differs. It could also be a common/http issue, but then I'd expect this to also occur on Chrome (but since it's timing sensitive in the first place this is hard to diagnose).

It's extremely hard to debug the live site as it's optimized code and a minimum reproduction would be best. I do believe that @angular/router can be removed from the equation, as it should be irrelevant according to my observations thus far.

One thing you could try is to vary the URLs of both endpoints (introduce a second endpoint that you use for the HTML rich content); if that solves the issue then it becomes more likely that this is a race condition in Safari's resource cache (although disabling the resource cache didn't seem to matter)

[KostyaTretyak]

After I added the second endpoint, the problem seems to have disappeared. In this case, it is probably possible to close the issue, or not yet?

[JoostK]

The best thing would be to create a minimum repro (ideally without Angular to keep it small) that simulates the same scenario (using XMLHttpRequest); if that reproduces in Safari then this should ideally be reported with WebKit.

[KostyaTretyak]

@JoostK, Thank you very much for your help and patience.

[JoostK]

As for Angular I'm going to close this, as there's no indication that this is an Angular bug.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}