angular / angular

Deliver web apps with confidence 🚀
https://angular.dev
MIT License
94.71k stars 24.68k forks source link

Async SVG files could not be loaded when the zone.js is present as peer dependency #55634

Open csfeijo opened 2 weeks ago

csfeijo commented 2 weeks ago

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

zone.js

Is this a regression?

No

Description

Async files was not loaded when the zone.js is present in the same project.

Inside the file: zone.js:~1712 when the globalZoneAwareCallback is commented the async files could be loaded again:

  // global shared zoneAwareCallback to handle all event callback with capture = false
  const globalZoneAwareCallback = function (event) {
      //return globalCallback(this, event, false);
  };

In my another library the SVG files are loaded with this approach:

  const { [assetName]: asset } = await import(`@sicredi/react-assets/dist/images/index.esm.js`);

So, basically some error occurs and the file is not loaded because the zone.js XHR/Event prototyping.

We are not using the zone.js directly in the project, we are using the "@grafana/faro-web-tracing" dependency, that´s load the "@opentelemetry/context-zone", and filanny this last one uses the "zone.js" dependency to work.

Here some UI examples with the code NOT commented and commented respectivelly:

Zone.js native code - (globalZoneAwareCallback not commented*) image

Zone.js native code - (with globalZoneAwareCallback commented*) image

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

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

React 17.0.2
Node: 14.21.3
Package Manager: npm 6.4.18
OS: Windows64 / Linux 64

Project using "@grafana/faro-web-tracing" => "@opentelemetry/context-zone" => "zone.js"

Anything else?

In resume if I only import the zone.js directly in my project, the SVG Loading using the async import does´t working. I mean, isn´t necessary import the "@grafana/faro-sdk" to reproduce this issue.

No response

JeanMeche commented 2 weeks ago

Hi, could you provide a stackblitz or a github repo that reproduces the issue. That would help for the investigation of the issue, thank you.

csfeijo commented 2 weeks ago

Hi, could you provide a stackblitz or a github repo that reproduces the issue. That would help for the investigation of the issue, thank you.

I will do that, it´s a internal project but I will create a sample on my github to simulate the issue. Thanks!