There is currently a project where we need to use web components made in angular in a shopify store. The webcomponent is hosted in www.example.com. The shopify store is hosted on www.myshopifystore.com. The component itself is 3D configurator built with babylonjs.

The webcomponent is successfully included in the store and everything works well when I do the following:

In the theme files of shopify I included the relevant JS and CSS files.

In the head:

<base href="www.example.com" />
<link rel="stylesheet" href="www.example.com/styles.css" >

At the end of the body:

 <script src="www.example.com/runtime.js" defer="defer"></script>
 <script src="www.example.com/polyfills.js" defer="defer"></script>
 <script src="www.example.com/main.js" defer="defer"></script>

In the page that I want the configurator in:

<threed-configurator templateid="article0"></threed-configurator>

As per my understanding the <base href="www.example.com"> needs to be included for referencing the assets that the web component uses. Removing it does not display any images or fonts that are used in the web component. Unfortunately keeping it in causes a problem in shopify where any of the links on the page redirect to www.example.com rather to the appropriate pages.

So the question is how to handle the referencing of assets that the webcomponent uses. Either in Angular directly or in shopify. Changing every single img src or font url to the absolute url in the angular project is not an option. Is there something we are missing?