Customize Angular-CLI to modify relative paths at build time

2
votes

I am using Angular CLI to build my Angular 4 project. I have a requirement to run the application

  1. as a standalone application
  2. as an application embedded in a portal page

The application runs well as a standalone app.

When embedded in a portal whose static content is served from a CDN, the resources that are loaded using relative URLs do not get loaded as they are nested under a different root directory under the CDN.

e.g. In my standalone app, I have a background image that I refer in my scss file as background: url('/assets/images/bg.jpg'). However, when embedded in portal, the relative URL is /cdn/app/assets/images/bg.jpg.

Is there a way to change the relative URLs used in SCSS and HTMLs as part of ng build ? Can I define a variable that holds my CDN path and Angular-CLI replaces the variable with the actual value at build time?

e.g.

background: url('$cdnAppRoot/assets/images/bg.jpg');

replaced with

background: url('/cdn/app/assets/images/bg.jpg')

1
angularangular-cli

1 Answers

1
votes

When you build for production you can add the deploy-url param to change where the assets should be read from.

ng build -d /cdn/app

I suggest adding a new npm script called prod to make this easier

{
   "scripts: {
     // Other npm scripts
     "prod": "ng build -d /cdn/app"
   }
}