Angular theming based on URL

Question

I'm looking for a solution where you have 1 angular project with multiple themes. Based on the URL a specif theme is loaded (style, images, etc). All the components will be the same in all themes.

For example:
URL A: loads style-a.scss and image-a.png
URL B: loads style-b.scss and image-b.png

When there is no theme specif image or style the defaults get loaded. In a perfect world, there is also an option to build a specif theme, so you don't have files from other themes.

I've already tried making a script and check for the web URL, and then load the specif theme styles. The problem is, this can't create a default fallback. Because there will always be a URL. Also sometimes the site is loaded faster than the function is completed, and the site 'flashes' from styling.

Answer 1

This is something similar to what you want.

https://juristr.com/blog/2019/08/dynamically-load-css-angular-cli/

For URL thing you could could check the environment at the time of bootstrap and load the style accordingly.