The background
I'm using Angular CLI to build a project (with multiple apps). I want to publish the apps on separate sub-paths on my domain, like example.com/apps/app1/
.
If I set the --base-href
parameter to /apps/app1/
it solves any issues regarding the router, and it will load the assets (JS, CSS, and images etc) just fine.
If I use the Location
service, I can use
this.location.prepareExternalUrl('/assets/data/data.json')
to resolve dynamically loaded assets (they will resolve to /apps/app1/assets/data/data.json
).
So far so good. But I now want to serve the app assets through a CDN, such as cdn.example.com
, while hosting the app itself on the original URL example.com/apps/app1/`. So now I build the app using:
ng build -prod --app app1 --base-href "/apps/app1/" --deploy-url "http://cdn.example.com/app-assets/apps/app1/"
This time, I apply both the --base-href
and --deploy-url
parameters. It works great in that it uses the base-href to help the Router resolve the URL and it loads the js and CSS files from the CDN. It also resolves the image URL references in the CSS files using the CDN URL.
The problem
When loading images or data from the assets folder dynamically (in a service or template), I can't find a good way for it to resolve the URLs using the deploy-url
configuration.
If I use the Location
service, it still uses the base-href
to resolve URLs, so
this.location.prepareExternalUrl('/assets/data/data.json')
will still resolve to /apps/app1/assets/data/data.json
instead of http://cdn.example.com/app-assets/apps/app1/assets/data/data.json
.
I would have expected it to use the deploy-url
value if one is defined, especially since that would be a general solution that would work when hosting the files on the same domain and when hosting the files on an external domain.
The question
Is there a way to resolve the asset URLs considering both the base-href
and the deploy-url
parameters?
Ideally an official Angular function like Location.prepareExternalUrl
, but if I can get the base-href and deploy-url parameters from Angular in some way, I could build my own service for it.
I would not want to define the URLs in the environment config since:
- It would require specific environment configs per app
- It creates a potential conflict with the values that are supplied when building the app.
Best Answer
To access
--deploy-url
value at application runtime, createdeploy-url.ts
with:And use this snippet in your main.ts file:
The idea is to get the url of currently executed Javascript file, which is main.js (or main.hash.js if
outputHashing
is enabled) and strip filename from it. Then in your services inject--deploy-url
value with@Inject(DEPLOY_URL) deployUrl: string
as a constructor parameter.