web-dev-qa-db-ja.com

Angular移行（4から6）e2e--proxy-configが機能しない

現在、アプリを4から6に移行していますが、プロキシスクリプトを実行できませんe2eテストの場合。

スクリプトリストは次のようになります。

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

私が理解していないのは、startコマンド（ngserve）はinstancenpm run start:tst5に対して完全に正常に機能するということです。しかし、npm run e2e:tst5のようなe2eテストを実行しようとすると、エラーUnknown option: '--proxyConfig'がスローされます。

私のangular.jsonの設定は次のようになります：

angle.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"
            }
        }
    },
  ...

編集

angular.cliに次の追加を加えて、e2eテストを機能させました。

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

しかし、このソリューションアプローチは決して満足のいくものではありません。別の環境に対して実行するたびに、このコード行を変更する必要がありました。 ng serve --proxy-config config/proxy/proxy.tst5.jsonのように記述して、コマンドラインでこれを管理したいと思います。

angularprotractorangular6e2e-testingangular-e2e
10
MarcoLe

この機能はサポートされなくなり、githubにはすでに未解決の問題がありますが、scriptを介してプロキシ構成を実行する非常に便利な方法を見つけました。

package.jsonに次の行を追加します（例）：

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

proxyConfigコマンドを使用してangular.jsonにng値を設定し、e2eテストの終了後にリセットするだけです。 ngコマンドが機能していることを確認します（機能していない場合は、オペレーティングシステムの環境プロパティにangular/cliパスを追加し、コンピューターを再起動します）。

5
MarcoLe

これを実現するには、angular.jsonを次のように更新します（my-projectの代わりにプロジェクト名を使用します）。

1）プロジェクト-> my-project-e2eで、devServerTargetをから更新します。

"my-project:serve"

に

"my-project:serve:e2e"

2）プロジェクト-> my-project->アーキテクト->構成で、追加します

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

私が正しく理解していれば、さまざまな環境に対してe2eテストを実行するたびにプロキシ構成行を変更する必要がないようにする必要があります。

次のような環境用に個別のプロキシ構成を作成します。

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

serveの下に各環境の構成を追加します。

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

次に、yourapp-e2eの下に、各環境の構成を再度追加します。

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

これで、これを簡単に実行できます。

ng e2e --configuration yourenv-e2e

E2eテストは、必要なプロキシ構成ファイルを使用して実行されます。
@ raymondboswelの回答に基づく。

2
Dawid Stróżak