How to run Protractor e2e tests using different Angular environment variables

Question

I use Angular environment variables to configure API endpoints:

.\src\environments:     environment.ts     environment.test.ts     environment.prod.ts 

The environtment files contain settings like the following which are different for local dev and CI servers:

export const environment = {   ...   apiUrl: "https://api.sample.com" }; 

That works fine when I need to build or start the application. I can simply specify the environment parameter:

ng serve --environment=test 

... but it appeared that it's impossible to set a specific environment when running e2e Protractor tests. The following command simply ignores the environment (which seems to be expected according to this comment). The default environment is always used:

ng e2e --environment=test    // same as `ng e2e` 

Are there any other ways to run the tests using a specific environment?

Answer 1

With the new Angular 6 angular.json config file: I was able to use my file environment.test.ts on my e2e tests. I had to create a new architect on my project, I called it serve-e2e.

    "serve-e2e": {       "builder": "@angular-devkit/build-angular:dev-server",       "options": {         "browserTarget": "q-desktop-v2:build:test"       }     } 

My build:test config uses the "fileReplacements" configurations :

    "test": {       "fileReplacements": [         {           "replace": "src/environments/environment.ts",           "with": "src/environments/environment.test.ts"         }       ]     } 

Then in my project-e2e I use my customized "serve-e2e" option for the devServerTarget:

      "options": {         "protractorConfig": "./protractor.conf.js",         "devServerTarget": "q-desktop-v2:serve-e2e"       } 

This makes it easy to add or ignore specific code if the app is running on test environment :

    if (!environment.test) {      // do something     } 

Answer 2

I was able to successfully use a different environment by adding it to the .angular-cli.json

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

then calling

ng e2e --environment test