The default Angular project template executes end-to-end tests using the development environment. If you’re like me and switch to a Mac from Windows quite frequently, you may want to have the ability to execute your e2e tests in a different configuration. We will enable executing Angular e2e tests in different environments by modifying the angular.json:

First of all, you need to ensure the project has been setup with multiple environments in the first place. I happen to use the following environments, each with its own environment.ts file under src/environments folder.

  • dev environment (environment.ts)
  • dev environment for MacOs (environment.mac.ts)
  • production environment (

The default Angular project template comes with environment.ts and already configured. I have added the mac environment to configurations for project configuration in angular.json file. In my case, the mac configuration is for purely storing a different API URL ( instead of localhost).

Modify angular.json file to add additional e2e environment configuration like below. Make sure to add these inside the e2e setup:

"project-xyz-e2e": { "root": "e2e/", "projectType": "application", "architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js" }, "configurations": { "production": { "devServerTarget": "project-timify:serve:production" }, "mac": { "devServerTarget": "project-timify:serve:mac" } } } .... }
Code language: JSON / JSON with Comments (json)

This allows you to specify the environment you wish to execute the end to end tests with the --configuration flag:

ng e2e // Execute using dev environment ng e2e --configuration=mac // Execute using mac environment ng e2e --configuration=production // Execute using production environment
Code language: Bash (bash)

That’s how you execute Angular end-to-end tests in different environments with the CLI.

Umut Esen

I am a software developer and blogger with a passion for the world wide web.

Leave a Reply