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

问题

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.

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

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

回答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.

来源：https://stackoverflow.com/questions/51928880/angular-migration-from-4-to-6-e2e-proxy-config-not-working