Customize Angular-CLI to modify relative paths at build time

Question

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

as a standalone application
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')

cgatian · Accepted Answer · 2017-11-27 22:16:59Z

1

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"
   }
}

answered Nov 27, 2017 at 22:16

cgatian

23.1k9 gold badges60 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anand Over a year ago

Perfect solution. Thank you.

Collectives™ on Stack Overflow

Customize Angular-CLI to modify relative paths at build time

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related