Table of contents

• Environment
  • Introduction
  • Adding additional environment
  • Consuming environment variables
  • isDevMode()
• Serve / Build
  • Environment-specific serves
  • Environment-specific builds
• References
  • https://github.com/angular/angular-cli/wiki/build

---

Environment

Introduction

The Angular CLI have the concept of different environments like development (dev) and production (prod).

The configuration files for each of them can be found under the src/environments/ folder, with the name of environment.ts and environment.prod.ts respectively. This is where we should configure the API URLs for dev and prod, and the mocks for our objects.

Adding additional environment

.angular-cli.json file contains an environments section. Add additional environments by adding new entries as required.

"environments": {
	"dev": "environments/environment.ts",
	"prod": "environments/environment.prod.ts",
	"staging": "environments/environment.staging.ts"
}

Now add a staging environment file environment.staging.ts under the src/environments/ folder.

export const environment = {
	production: true,
	apiBaseUrl: 'api.staging.com/'
};

Consuming environment variables

In my components, services and other classes when I need some env variable I’ll import like this. Angular takes care of swapping the environment file for the correct one.

import { environment } from '../environments/environment';

@Component({ ... })
export class AppComponent {
	title: string = environment.appTitle;
}

Detecting Development Mode With isDevMode()

Angular also provides us with an utility function called isDevMode that makes it easy to check if the app in running in dev mode:

import { Component, OnInit, isDevMode } from '@angular/core';
...

@Component({ ... })
export class AppComponent implements OnInit {
	ngOnInit(){
		if(isDevMode()){
			console.log('Development!');
		}else{
			console.log('Production!');
		}
	}
}

---

Serve / Build

Environment-specific serves

ng serve builds the application and starts a web server.

When running ng serve, the compiled output is served from memory, not from disk. This means that the application being served is not located on disk in the dist/ folder.

# development
ng serve
ng serve --env=dev

# production
ng serve --env=prod

Environment-specific builds

ng build compiles the application into an output directory. The build artifacts will be stored in the dist/ directory.

ng build can specify both a build target (--target=production or --target=development) and an environment file to be used with that build (--environment=dev or --environment=prod). By default, the development build target and environment are used.

By default, a Dev build produces source maps where as Prod build does not.

# these are equivalent
ng build --target=production --environment=prod
ng build --t=production --e=prod
ng build --prod --env=prod
ng build --prod

# and so are these
ng build --target=development --environment=dev
ng build --t=development --e=dev
ng build --dev --env=dev
ng build --dev
ng build

--dev vs --prod builds

Both --dev/--target=development and --prod/--target=production are 'meta' flags, that set other flags.

Runs UglifyJS on the code. When using Build Optimizer the vendor chunk will be disabled by default. You can override this with --vendor-chunk=true.

# Uglification can be done in production build only
ng build --prod --build-optimizer --vendor-chunk