I'd like to have a different base href in my Angular 2 app for dev and for production.

I've seen answers to questions that are similar (and some identical) to this one.

The best answer here summarizes well 2 solutions that are repeated in all the answers to these questions:

Set base href from an environment variable with ng build

I tried both, each has its own problems:

1) APP_BASE_HREF - doesn't work for js/css files. For instance when trying to request app/someroute/1, it'll attempt to request the js and css files from app/someroute/1 instead of from app.

2) Modifiying base href in ngOnInit - by the time ngOnInit is called, the js and css files have already been requested and so the modified base href doesn't apply to the files loaded on init, only to files requested afterwards (which doesn't help me).

The only thing that works for me so far is to manually modify the html for production after each pilation, but I'm trying to automate it.

Possible solutions:

1) Altering base href before js and css files are requested - is there a way to do that? They're basically requested immediately on page load. Possibly adding a scripts which is executed in head before link rel?

2) Compiling different HTMLs for dev and production with different base href values, e.g. with some sort of very lightweight html template engine that won't be an overkill.

What do you think?

I'd like to have a different base href in my Angular 2 app for dev and for production.

I've seen answers to questions that are similar (and some identical) to this one.

The best answer here summarizes well 2 solutions that are repeated in all the answers to these questions:

Set base href from an environment variable with ng build

I tried both, each has its own problems:

1) APP_BASE_HREF - doesn't work for js/css files. For instance when trying to request app/someroute/1, it'll attempt to request the js and css files from app/someroute/1 instead of from app.

2) Modifiying base href in ngOnInit - by the time ngOnInit is called, the js and css files have already been requested and so the modified base href doesn't apply to the files loaded on init, only to files requested afterwards (which doesn't help me).

The only thing that works for me so far is to manually modify the html for production after each pilation, but I'm trying to automate it.

Possible solutions:

1) Altering base href before js and css files are requested - is there a way to do that? They're basically requested immediately on page load. Possibly adding a scripts which is executed in head before link rel?

2) Compiling different HTMLs for dev and production with different base href values, e.g. with some sort of very lightweight html template engine that won't be an overkill.

What do you think?

• javascript
• html
• angular

2 Answers 2

I found out there's a cli option for that (requested by the munity) --base-href.

I'm simply building for production like that:

ng build --prod --base-href=/prod_dir/

I use a Gulp 4 task to automate building of the app with Angular-cli. The gulp task will run the cli mand to build the app and passes in the appropriate value to use for the base tag. I also use this task to deploy the files to the server (using gulp-rsync).

Here are some snippets from my gulpfile:

const spawn = require('child_process').spawn;
const environment = process.env.NODE_ENV || 'staging';

if (environment === 'development') {
  console.log('No deploys performed for development environment.');
  process.exit(0);
}

gulp.task('build', gulp.series(build));

function build(done) {
  var cmd = spawn('ng', ['build', '--target=production', '--environment=' + environment, '--base-href=/app/'], {stdio: 'inherit'});
  cmd.on('close', function (code) {
    console.log('Build task exited with code: ' + code);
    done(code);
  });
}