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

Possible duplicate of [Angular 2 / 4 / 5 - Set base href dynamically](https://stackoverflow.com/questions/38112891/angular-2-4-5-set-base-href-dynamically) — Ahmed Kamal, Feb 22 '19 at 00:53
@Ahmed, 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/// images loading from SCSS not happening Exmaple: Url generated for fetching images :https://domain/assets/img/xyz.jpg Desired URL : https://domain///assets/img/xyz.jpg how to tell angular to fetch images with Desired URL — mannu, Feb 22 '19 at 19:08
In angular `scss` image path is related to the `scss` file itself, for example, you have `home.component.scss` living at `src/app/` directory and you want to load an image from `src/assets/images` your path will be `url('../assets/images/myimage.png')` is it makes sense now? — Ahmed Kamal, Feb 22 '19 at 21:08

vl.lapikov · Answer 1 · 2019-06-26T12:38:17.393

6

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://...';

edited Jun 26 '19 at 12:38

answered Jun 26 '19 at 08:15

vl.lapikov

746
7
12

score 0 · Answer 2 · answered Jan 08 '21 at 01:38

In our case we needed same dist file set to work with and without url path prefix. Solution was to use relative deploy-url and dynamically changed html tag

--deploy-url ../static/

or you may need

--deploy-url ./static/

and

  <base href="/some-path/">

or

  <base href="/">

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

2 Answers2