Configure base URL depending on environment

Question

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.

Answer 1

If you are using the Angular CLI you can do:

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

OR

ng build --prod --bh /myUrl/

Answer 2

An alternative to the option described in @DeborahK answer could be to add build configurations to package.json and setup your IDE to specify the desired build configuration depending on environment it's building for.

Here is a snippet from package.json:

{
  ...
  "scripts": {
    ...
    "build": "ng build",
    "build:Debug": "ng build --dev --base-href /",
    "build:Release": "ng build --prod --base-href /angular-app/",
    ...
  },
  ...
}

And here is a snippet of .csproj file to give you an idea of how it could be integrated with Visual Studio (credits to @Andrey_Fomin in this discussion):

  <Target Name="NgBuildAndAddToPublishOutput" AfterTargets="ComputeFilesToPublish">
    <Exec Command="npm run | findstr &quot;build:$(Configuration)&quot;" ConsoleToMSBuild="true" IgnoreExitCode="true" EchoOff="true" WorkingDirectory="$(MSBuildProjectDirectory)">
      <Output TaskParameter="ConsoleOutput" PropertyName="NpmScriptName" />
    </Exec>
    <Exec Condition=" '$(NpmScriptName)'=='build:$(Configuration)' " Command="npm run $(NpmScriptName)" />
    <Exec Condition=" '$(NpmScriptName)'!='build:$(Configuration)' " Command="npm run build" />
  </Target>