Angular How to set Dynamically(runtime) --deploy-url?

Question

I am able to set base-href dynamically as below.

index.html

<script>
  window['base-href'] = window.location.pathname;
</script>

app.module.ts

providers: [ 
        { provide: APP_BASE_HREF, useValue: window['base-href'] },
    ],

this worked well for routing.

Its not working for assets loading

How can i set for assets ? --deploy-url is works at compile time but how can i do it at runtime ?

mentioned link is for routing not for assets (images etc) which are loading from SCSS files.

All my http calls happening properly

Example : https://domain/<env>/<contexname>/<restcall_URI>

images loading from SCSS not happening

Exmaple: Url generated for fetching images :https://domain/assets/img/xyz.jpg

Desired URL : https://domain/<env>/<contexname>/assets/img/xyz.jpg

how to tell angular to fetch images with Desired URL

Answer 1

I was looking to serve Angular files from CDN. Ended up adding this code to main.ts:

declare let __webpack_public_path__: any;
__webpack_public_path__ = window['cdnUrl'];

In your index.html you could set cdnUrl dynamically

window.cdnUrl = 'https://...';