Skip to content

Environment Configuration

Different files for production and development

Inside angular.json, and fileReplacements block within the configurations blocks for production and development.

"configurations": {
            "production": {
              ...,
              "fileReplacements": [{
                "replace": "src/app/environments/environment.ts",
                "with": "src/app/environments/environment.prod.ts"
              }]
            },
            "development": {
              ...,
              "fileReplacements": [{
                "replace": "src/app/environments/environment.ts",
                "with": "src/app/environments/environment.dev.ts"
              }]
            }

Now when we build we can pass a configuration switch

ng build --configuration production --base-href ./

You can also customize npm scripts in package.json to do this for you.

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --configuration production --base-href ./",
    "dev": "ng build --configuration development --base-href ./ && node post-build.js <path>",
    "prod": "ng build --configuration production --base-href ./ && node post-build.js <path>",
    "test": "ng test"
  }

So if I run

npm run build

this will run my custom ng build command.

Additional Scripts

You can create additional scripts, note that I added dev and prod which also run a javascript file as well.

Comments