Unable to load assets in single spa angular application

Question

I'm working with a single-spa-angular setup where my main application (app1) is running on port 4200 and a child application (app2) is on port 4201. Both applications are built using Angular 13. I'm encountering an issue where asset requests for app2 are mistakenly being sent to app1's port (4200), resulting in 404 errors.

In app2, when I use a CSS property like background-image: url('assets/abc.svg'), the request is wrongly directed to port 4200 instead of 4201. This is happening despite having the assets correctly configured in angular.json.

• Following the single-spa official documentation, which suggests using assetUrl for loading assets in HTML and TypeScript, but it doesn't cover CSS.
• Setting __webpack_public_path__, but this did not resolve the issue.
• Considering the --deploy-url option, but it's deprecated in Angular 13.

Has anyone faced a similar issue in a single-spa-angular environment, particularly with Angular 13? Any suggestions or solutions on how to ensure CSS asset requests are directed to the correct port would be greatly appreciated.