Search code examples
javascriptangulartypescriptangular-cli

Configure base URL depending on environment

Suppose we have Angular 4+ app that needs to be located in different relative root URLs on different environments, i.e.:

  • http://localhost:4200/index.html for development
  • http://prod.server.com/angular-app/index.html for production

Most likely, we'd want to have that option in our environment.x.ts files:

export const environment = {
    production: false,
    appRoot: "/"
};

export const environment = {
    production: true,
    appRoot: "/angular-app/"
};

How can we configure Angular build/runtime infrastructure to automatically adjust the app depending on this option in environment.x.ts files?

UPDATE: Since I'm using the Angular CLI toolchain indirectly via Visual Studio build/publish system (template), it'd be nice to have a solution based completely on Angular CLI + *.json/*.ts/*.js files. This way it would be suitable for any build system where Angular CLI could be used.

Solution

  • If you are using the Angular CLI you can do: 

    ng build --prod --base-href /myUrl/

    OR

    ng build --prod --bh /myUrl/