Angular multiple development environments

Configure Angular for Multiple Development Environments

In this post I’ll show you how I set up my angular.json file to support multiple build environments for an Angular 6 application. I’ve used the configuration below in a development stack where I had a development, staging, and production server.

Configuration

// angular.json
...
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
"development": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
...

Each configuration tells Angular to replace /environment.ts with the correct environment file in the "with": block.

Now when you run

ng build --configuration=development

The Angular CLI will build an optimized static bundle in the newly generated dist/ directory with the environment variables in environment.dev.ts.

CI/CD Possibilities

With this setup I was able to create an AWS CI/CD pipeline using CodeCommit, CodeBuild, CodeDeploy, and CodePipeline. The AWS CodeBuild service allowed me to set variables at build time so making an automated pipeline for each EC2 instance was as simple as replacing the above command with:

ng build --configuration=$ENVIRONMENT

For those of you interested here is the buildspec.yml I used for my AWS CI/CD pipeline:

version: 0.2

phases:
install:
commands:
- echo $CODEBUILD_SRC_DIR
- npm install -y npm@latest
- npm install -g @angular/cli
- rm package-lock.json
pre_build:
commands:
- npm install
build:
commands:
- echo build started on `date`
- ng build --configuration=$ENVIRONMENT
- ls -l -F
post_build:
commands:
- echo Production build ended on `date`
artifacts:
files:
- appspec.yml
- dist/my-app/**/*
cache:
paths:
- node_modules/

Comment below if you would like me to write a post on how I made the all AWS CI/CD pipeline!

2 thoughts on “Configure Angular for Multiple Development Environments”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.