Angular 4 ng build base-href duplicate subdirectory

Question

I'm deploying builds of my angular app to an s3 bucket with different subdirectories based on the branch name. The urls look like:

pr.example.com/add-cool-spinner
pr.example.com/increase-awesomeness

If I deploy using --base-href /add-cool-spinner it properly updates the base tag: <base href="add-cool-spinner">. However when redirecting or generating links the subdirectory doubles, so link tags generated from the router look like:

pr.example.com/add-cool-spinner/add-cool-spinner/page

I've tried changing only --deploy-url instead, but then it doesn't update the base href tag, and references root url (pr.example.com/page).

Have any hints for not doubling up the base url directory? Is this a bug or did I do something wrong?

Answer 1

Turns out that this isn't super well documented, but angular is expecting a proceeding and trailing slash. So deploy with:

ng build --base-href /add-cool-spinner/

It still isn't referencing images correctly that are in image tags, and that might be because of known bugs in the builder.