Difference between revisions of "Adding environements to Angular"

Latest revision as of 08:34, 16 August 2017

Using angular-cli & environment.ts

The new angular-cli have the concept of different environments like development (dev) and production (prod). When creating a new application with the cli ng my-app and /environments folder is a part of the scaffold which contains the environment files.

.
├── environment.ts
├── environment.prod.ts
.
.

and then within the /src/app folder is and environment.ts file.

Here are the contents:

export const environment = {  
  production: false
};

As you might imagine, the *.production.ts file would have production: true.

When the application is built (ng build) or served (ng serve), the environment.{env}.ts file from /environments is pulled and replaces the file within /src/app. By default this is dev.

In order to grab the production version, set the environment to production using the following:

#build
$ ng build --environment=production
#shorthand
$ ng b -prod

#serve
$ ng serve --environment=production
#shorthand
$ ng s -prod

Adding additional environments

If there are additional environments your build process needs to support, you can add more files to the /environments folder with the name of said environment such as environment.qa.ts and then use.

#build
$ ng build --environment=environment

Adding a "qa" environment.

Create a new file called environment.qa.ts in the /environment folder with the following contents:

export const environment = {  
  production: false,
  envName: 'qa'
};

Add the qa entry to the .angular.cli.json config:

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

Now the new environment is ready to use.

Putting it together

First, add a new property to each of the environment.{env}.ts files.

export const environment = {  
  production: false,
  envName: 'dev'
};

Then in the myapp.component.ts file import settings, and set the binding.

import { Component } from '@angular/core';  
import { environment } from './environment'; 

@Component({
  moduleId: module.id,
  selector: 'myapp-app',
  templateUrl: 'myapp.component.html',
  styleUrls: ['myapp.component.css']
})
export class MyappAppComponent {  
  title = 'myapp works!';
  environmentName = environment.envName;
}

Finally, in the html template add the h2 tag.

 <h1>  
   {{title}}
 </h1>

 <h2>  
   {{environmentName}}
 </h2>  

Now if you serve the app with each of the --environment={envName}, the binding will display accordingly. Note that the short hand ng s -prod will not work for custom environments i.e. ng s -qa, however you can use ng s -e qa

Notes

Although this is a nice feature there are some things to point out as shortcomings, challenges etc.

• For every property that is added to the /src/app/environment.ts, it must be added to the files in /config/environment.{env}.ts, this is a disruptive workflow.
• Using this as a solution only works if you are building your application from source and not once then moving to each environment.
• the /src/app/environment.ts is only a stub per se and there to support the typescript compiler and serves no other purpose.

http://tattoocoder.com/angular-cli-using-the-environment-option/#addingadditionalenvironmentsdelnotyetsupporteddel