Angular migration (from 4 to 6) e2e --proxy-config not working

Question

I've been currently migrating my app from 4 to 6 and I can not executing my proxy script for my e2e tests.

The script listing looks as follows:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start:tst1": "ng serve --proxy-config config/proxy/proxy.tst1.json",
    "start:tst5": "ng serve --proxy-config config/proxy/proxy.tst5.json",
    ...
    "test:watch": "ng test",
    "lint": "ng lint --type-check true",
    "e2e": "ng e2e",
    "e2e:tst1": "ng e2e --proxy-config config/proxy/proxy.tst1.json",
    "e2e:tst5": "ng e2e --proxy-config config/proxy/proxy.tst5.json",
  },

What I don't understand is, that the start commands (ng serve) work perfectly fine for instancenpm run start:tst5. But when I try to execute the e2e tests like npm run e2e:tst5 it throws me the error: Unknown option: '--proxyConfig'.

The config in my angular.json looks as follows:

angular.json

...
"lmsbo-bo-e2e": {
  "root": "e2e",
  "sourceRoot": "e2e",
  "projectType": "application",
  "architect": {
    "e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": {
        "protractorConfig": "e2e/protractor.conf.js",
        "devServerTarget": "lmsbo-bo:serve"
      },
        "configurations": {
            "production": {
                "devServerTarget": "lmsbo-bo:serve:production"
            }
        }
    },
  ...

Edit

I got the e2e test working with following addition in the angular.cli:

        "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
                "browserTarget": "lmsbo-bo:build",
                "proxyConfig": "config/proxy/proxy.tst5.json" <== **added this** line
            },
            "configurations": {
                "production": {
                    "browserTarget": "lmsbo-bo:build:production"
                }
            }
        },

But this solution approach is not satisfying by any means. I got to change this line of code every time I want to execute against another environment. I would rather want to manage this via command line by writing something like: ng serve --proxy-config config/proxy/proxy.tst5.json.

Answer 1

You can accomplish this by updating your angular.json as follows (substitute your project name for my-project):

1) In projects -> my-project-e2e, update devServerTarget from

"my-project:serve" 

to

"my-project:serve:e2e"

2) In projects -> my-project -> architect -> configurations, add

"e2e": {
          "browserTarget": "cli-advisor-portal:build:e2e",
          "proxyConfig": "proxy.local.config.json"
        }

Answer 2

Even though this feature is not supported anymore and there is already an open issue on github, Ive found out a pretty convinient way to execute the proxy config via script:

add in your package.json following lines (example):

"e2e:local": "ng config projects.**yourAppName**.architect.serve.options.proxyConfig **yourProxyFile1** && ng e2e && ng config projects.**yourAppName**.architect.serve.options.proxyConfig ''",
"e2e:tst1": "ng config config projects.**yourAppName**.architect.serve.options.proxyConfig **yourProxyFile2** && ng e2e && ng config projects.**yourAppName**.architect.serve.options.proxyConfig ''"

All you do is to set the proxyConfig value in your angular.json via ng command and reset it after the e2e tests are finished. Make sure the ng command is working (if not add your angular/cli path into your environment properties of your operating System and restart your computer).