CODEWITHSUNDEEP
angular
mannu
mannu

Reputation: 71

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

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

Upvotes: 6

Views: 4164

Answers (2)

Adam
Adam

Reputation: 2115

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="/">

Upvotes: 1

vl.lapikov
vl.lapikov

Reputation: 796

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

Upvotes: 6

Related Questions