eclipse-theia/theia

Webview assets do not load when requesting within Angular

Open

#15,301 建立於 2025年3月26日

在 GitHub 查看
 (3 留言) (0 反應) (0 負責人)TypeScript (18,676 star) (2,478 fork)batch import
bughelp wantedwebviews

描述

Bug Description:

I am reporting this bug after this.

When loading an extension within Theia and activating its webview (by editing a custom file), some of the assets of the webview cannot be loaded caused by the following error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading '1')
    at getWebviewIdForClient (service-worker.js:287:65)
    at processResourceRequest (service-worker.js:202:23)

service-worker.js:287:65

This error appears when the webview is actually an angular application. Somehow angular manages to break out of the resource fetching provided by the fake.html+service-worker.

This is a bug within Theia as the current version of the service-worker from VSCode does not have the same issue. Running the extension which contains an angular application as a webview, within vscode, does not cause the error, and all assets are loaded properly.

After a few hours of debugging, I have found the following:

  • Within the webview, the request referrer is the same between a working request and a failing request.
  • For a failing request, the client that is found is not root of the theia webview, or the fake.html, but a page within the webview.
  • Requests that happen outside of angular, but happen after angular is loaded are also affected. This includes font requests made by stylesheets which are linked to from the index.html.
  • In the above scenario, temporarily disabling angular makes the issue go away and assets are loaded properly.
  • The service-worker instance seems to be the same for working requests and not working requests but the const client = await self.clients.get(event.clientId); here returns different clients for the same ID. Yes the event.clientId is the same between working and not working requests.

Steps to Reproduce:

I have not been able to create a repo with a reproducible setup as this would require some effort to recreate the setup that I currently have again, for debugging and sharing purposes. If this issue cannot be resolved without it, I might need to create such an example repo.

  1. Create a basic angular application, and load a file from assets using the angular http client
  2. Build the angular app
  3. Create a basic VSCode extension which has a command to open up a webview
  4. Link the webview with the index of the built angular app
    1. Here the base tag needs to updated to the extension Uri
  5. Load the extension within VSCode and see that although angular loads properly. Requests from within angular/after angular has loaded, fail with the above error.

Additional Information

  • Operating System: Browser: Latest chrome
  • Theia Version: Latest as of ticket (1.59.0)
  • Angular Version: Latest Angular (19.2.3)

貢獻者指南