Angular CLI Configurations

If you have not upgraded your Angular application to version 6+, you should really take the time and make the switch. There are some major changes in the version 6 release. You can read it here.

One major change is the Angular CLI. In version 6+, you will noticed that Angular has replaced the file angular-cli.json with angular.json. In version 6+, each CLI workspace has projects, each project has targets, and each target can have configurations.

Building Configurations

In the old CLI, you would build different versions of your application by supplying the environment flag, like:

ng build --environment=development

In the new CLI, it is now like:

ng build --configuration=development

This is because in Angular 6, each target now has a configuration where you can configur how your application will be built. In the Production configuration, which comes with Angular with you create a new project by ng new.., you can see it has the following configurations:

"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
}

This config will be used if you built your application with the --prod flag. The flag is just a shorthand for ng build --configuration=prod.

What if you have a custom configuration called Staging? You would have to add a new config in your configuration property. Like:

"configurations": {
            "production": {
            ...
             }
            "staging": {
              "someProperty": blah,
              "someProperty": blah
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ],
            }

Now you can build your Staging with ng build --configuration=staging.

Let’s go one step further, what if you want to build Staging with all the options that Production have? For example, having aot, and tree shaking? Well you could either add those options into your Staging configuration, or you could create a new configuration called Staging-Prod like the following:

"configurations": {
            "production": {
            ...
             }
            "staging": {
              ...
            }
            "staging-prod": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ],
            }

Now you can build Staging-Prod by ng build --configuration=staging-prod. You will have all your Staging environment properties with the Prodution options.

Serve Configurations

When you run ng serve, CLI is running the default build configurations. If you want to ng serve a custom configuration like the Staging configuration we have created earlier, you will have to add a section called staging like:

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myApp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "myApp:build:production"
            }
            "staging": {
              "browserTarget": "myApp:build:staging"
            }
          }
        },

Notice that in the staging property, I decalred the browserTarget to be "myApp:build:staging", which means it will go try to find in the build, for a property named staging. Earlier, we have created just that. We added a new build called staging, and now Angular will run serve with those configurations.

Now when you run ng serve --configuration=staging, you will get all the staging environment feel with serve.

That’s about all the basics of Angular configurations. Make sure to check out the detailed docs at here.