Angular 2 base href from environment variable

Question

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 compilation, 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?

Answer 1

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

I'm simply building for production like that:

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