Webview assets do not load when requesting within Angular
#15,301 opened on 2025年3月26日
説明
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)
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.
- Create a basic angular application, and load a file from assets using the angular http client
- Build the angular app
- Create a basic VSCode extension which has a command to open up a webview
- Link the webview with the index of the built angular app
- Here the base tag needs to updated to the extension Uri
- 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)