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.

Superabundant

Try see this: -#51682313 -#50927906 bye – Beige

Not what I am looking for. – Superabundant

You can run the following command in terminal before your test execution Set the proxy in terminal SET https_proxy=yourcompanydomain.com:portnumber SET http_proxy=yourcompanydomain.com:com:portnumber – Deal

The proxy configuration is already set. When i execute ng serve --proxy-config config/proxy/proxy.tst1.json it works all fine. But when i replace serve with e2e the error appears. Im kind of frustrated.... – Superabundant

From what I can see, it is not supported anymore github.com/angular/angular-cli/issues/11408 github.com/angular/angular-cli/issues/6358 – Sakovich

Yeah thats pretty much what I suspect right now. Is it maybe possible to add multiple paths in the proxyConfig: .... and then execute different paths via ng serve ---proxyOptions=... ? – Superabundant

there is an open issue for this on GitHub see following github.com/angular/angular-cli/issues/6358 – Toro

@creep-story can you pls share config/proxy/proxy.tst5.json ? – Irtysh

Answer 1

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).

Superabundant

This will throw me Error: Unexpected end of file. when it tries to remove config. – Kironde

Answer 2

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"
        }

Kiele

Not sure why this was voted down. It worked very well for me - in my case I wanted to use two different proxy configs for two different environments (local and test). – Hawaiian

Glad to hear it! – Kiele

Answer 3

If I understand correctly - you want to avoid having to change the proxy config line every time you want to run e2e tests against different evironment:

Create separate proxy configs for your environments such as:

• proxy.config.yourenv1.json
• proxy.config.yourenv2.json

Add configurations for each environment under serve:

"serve": { ... "configurations": { "yourenv1-e2e": { "browserTarget": "yourapp:build", "proxyConfig": "proxy.config.yourenv1.json" }, "yourenv2-e2e": { "browserTarget": "yourapp:build", "proxyConfig": "proxy.config.yourenv2.json" } } },

Then under yourapp-e2e again add configurations for each environment:

"yourapp-e2e": {
  ...
  "architect": {
    "e2e": {
      ...
      "configurations": {
        "yourenv1-e2e": {
          "devServerTarget": "yourapp:serve:yourenv1-e2e"
        },
        "yourenv2-e2e": {
          "devServerTarget": "yourapp:serve:yourenv2-e2e"
        },
      }
    },

Now you can simply run this:

ng e2e --configuration yourenv-e2e

The e2e tests will run using desired proxy config file.
Based on the @raymondboswel's answer.

Alcoholicity