Angular 2+ – Set base href dynamically

by

The marked answer here did not solve my issue, possibly different angular versions. I was able to achieve the desired outcome with the following angular cli command in terminal / shell:

ng build --base-href /myUrl/

ng build --bh /myUrl/ or ng build --prod --bh /myUrl/

This changes the <base href="https://stackoverflow.com/"> to <base href="https://stackoverflow.com/myUrl/"> in the built version only which was perfect for our change in environment between development and production. The best part was no code base requires changing using this method.

To summarise, leave your index.html base href as: <base href="https://stackoverflow.com/"> then run ng build --bh ./ with angular cli to make it a relative path, or replace the ./ with whatever you require.

Update:

As the example above shows how to do it from command line, here is how to add it to your angular.json configuration file.

This will be used for all ng serving for local development

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "baseHref": "/testurl/",

This is the config specific for configuration builds such as prod:

"configurations": {
   "Prod": {
     "fileReplacements": [
        {
          "replace": src/environments/environment.ts",
          "with": src/environments/environment.prod.ts"
        }
      ],
      "baseHref": "./productionurl/",

The official angular-cli documentation referring to usage.

More Related Contents:

  1. Angular 2 innerHTML (click) binding
  2. Angular 4 – Http to HttpClient – property ‘someproperty’ does not exist on type Object
  3. Property ‘value’ does not exist on type ‘EventTarget’
  4. How to get `DOM Element` in Angular 2? [duplicate]
  5. function gets called several times
  6. Working example of Angular 2.0 Material MdDialog with Angular 2.0
  7. Need to insert Script tag in angular 2
  8. How to bind event listener for rendered elements in Angular 2?
  9. How to implement SignIn with Google in Angular 2 using Typescript
  10. RouterModule.forRoot(ROUTES) vs RouterModule.forChild(ROUTES)
  11. Angular 2/4 component with dynamic template or templateUrl
  12. Best way to “flatten” an array inside an RxJS Observable
  13. Angular 12 source map is missing in browser
  14. Use nav.push with side menu in ionic 2
  15. ERROR Error: No value accessor for form control with unspecified name attribute on switch
  16. How to make an http call every 2 minutes with RXJS?
  17. Angular 5 and Service Worker: How to exclude a particular path from ngsw-config.json
  18. View is not updated on change in Angular2
  19. Debug & Run Angular2 Typescript with Visual Studio Code?
  20. How to “communicate” between components in Angular?
  21. How to specify locale thousand separator for number pipe in Angular 4
  22. What is the difference between formControlName and FormControl?
  23. addControl to FormGroup dynamically in Angular
  24. Do I have to unsubscribe from ActivatedRoute (e.g. params) observables?
  25. @HostBinding and @HostListener: what do they do and what are they for?
  26. @angular/material/index.d.ts’ is not a module
  27. What is pipe for in RxJS?
  28. Angular2 ngModel inside ngFor (Data not binding on input)
  29. How to generate components in a specific folder with Angular CLI?
  30. What are all the index.ts used for?

Leave a Comment