title: Angular CLI build using base-href and deploy-url to access assets on CDN
body: <h1>The background</h1>
  <p>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 <code>example.com/apps/app1/</code>.</p>
  <p>If I set the <code>--base-href</code> parameter to <code>/apps/app1/</code> it solves any issues regarding the router, and it will load the assets (JS, CSS, and images etc) just fine.</p>
  <p>If I use the <code>Location</code> service, I can use</p>
  <pre><code>this.location.prepareExternalUrl('/assets/data/data.json')
  </code></pre>
  <p>to resolve dynamically loaded assets (they will resolve to <code>/apps/app1/assets/data/data.json</code>).</p>
  <p>So far so good. But I now want to serve the app assets through a CDN, such as <code>cdn.example.com</code>, while hosting the app itself on the original URL example.com/apps/app1/`. So now I build the app using:</p>
  <pre><code> ng build -prod --app app1 --base-href &quot;/apps/app1/&quot; --deploy-url &quot;http://cdn.example.com/app-assets/apps/app1/&quot;
  </code></pre>
  <p>This time, I apply both the <code>--base-href</code> and <code>--deploy-url</code> 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.</p>
  <hr />
  <h1>The problem</h1>
  <p>When loading images or data from the assets folder <em><strong>dynamically</strong></em> (in a service or template), I can't find a good way for it to resolve the URLs using the <code>deploy-url</code> configuration.</p>
  <p>If I use the <code>Location</code> service, it still uses the <code>base-href</code> to resolve URLs, so</p>
  <pre><code>this.location.prepareExternalUrl('/assets/data/data.json')
  </code></pre>
  <p>will still resolve to <code>/apps/app1/assets/data/data.json</code> instead of <code>http://cdn.example.com/app-assets/apps/app1/assets/data/data.json</code>.</p>
  <p>I would have expected it to use the <code>deploy-url</code> 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.</p>
  <hr />
  <h1>The question</h1>
  <p>Is there a way to resolve the asset URLs considering both the <code>base-href</code> and the <code>deploy-url</code> parameters?</p>
  <p>Ideally an official Angular function like <code>Location.prepareExternalUrl</code>, 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.</p>
  <p>I would not want to define the URLs in the environment config since:</p>
  <ol>
  <li>It would require specific environment configs per app</li>
  <li>It creates a potential conflict with the values that are supplied when building the app.</li>
  </ol>