角度プロジェクトを構築するときのファイル置換


この短い記事は、異なるビルド構成/ターゲットのファイル(例えば設定ファイル)を置き換えることですdev , qa and prod ) 角で.我々のプロジェクトのために、我々は選ばれた構築目標に基づいて異なるファイルを提供するために角度ファイル置き換え機能を活用しました:
{
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      },
      {
        "replace": "src/configurations/configuration.json",
        "with": "src/configurations/configuration.prod.json"
      }
    ]
  },
  "dev": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.dev.ts"
      },
      {
        "replace": "src/configurations/configuration.json",
        "with": "src/configurations/configuration.dev.json"
      }
    ]
  },
  "qa": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.qa.ts"
      },
      {
        "replace": "src/configurations/configuration.json",
        "with": "src/configurations/configuration.qa.json"
      }
    ]
  }
}

しかし、バンドルの外側のファイル置換は角で公式に決してサポートされませんでした、そして、説明されるように角度9リリース以来働きますhere .
我々は、リンクされたGithub問題で提案された回避策に移行しました、そして、それは今まで私たちのためにうまく働いています.誰かが同じ問題/質問を持っている場合には(そして、私自身のためのアプローチを文書化してください.)私はsimple example repository シングルのアプローチを紹介するconfiguration.json ファイル.
次の節で必要な手順を示します.

設定フォルダ


この例では、異なる構成を保持する専用のフォルダが作成されました.これは必ずしも必須ではありませんが、ファイルを整理します.次に、各構成ターゲットは、configuration.json . それ以外の場合、正しいファイルを選択してコピーすることはできません(次の節で説明します).
最後に次のようになります.

角度CLI設定ファイル(角. json )。


以下のスニペットに示すように、配備構成のそれぞれについてconfiguration.jsonassets セクション
{
  "production": {
    "assets": [
      "src/favicon.ico",
      "src/assets",
      {
        "input": "src/configurations/prod",
        "output": "configuration/",
        "glob": "*.json"
      },
      {
        "input": "src/configurations",
        "output": "configuration/",
        "glob": "README.md"
      }
    ],
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  },
  "dev": {
    "assets": [
      "src/favicon.ico",
      "src/assets",
      {
        "input": "src/configurations/dev",
        "output": "configuration/",
        "glob": "*.json"
      },
      {
        "input": "src/configurations",
        "output": "configuration/",
        "glob": "README.md"
      }
    ],
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.dev.ts"
      }
    ]
  },
  "qa": {
    "assets": [
      "src/favicon.ico",
      "src/assets",
      {
        "input": "src/configurations/qa",
        "output": "configuration/",
        "glob": "*.json"
      },
      {
        "input": "src/configurations",
        "output": "configuration/",
        "glob": "README.md"
      }
    ],
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.qa.ts"
      }
    ]
  }
}
設定フォルダで、作成されたサブフォルダによって、正しいconfiguration.json ファイルを選択し、コピーすることができます.…の助けを借りてoutput プロパティ内のパスdist フォルダが定義されます.この例では、ルートパスの構成フォルダにコピーされます.加えてREADME.md の隣に置くconfiguration.json プロパティとアプリケーションへの影響を記述するには.専用のフォルダを作成する2つのファイルをお互いに隣接して保つのに役立ちます.

私はアプローチについては好きではない、私たちは今assets その他のビルド構成のプロパティassets フォルダ(画像、フォント、翻訳など)はコピーされません.また、専用のサブフォルダを作成しなければならないとしても、それはファイルの置換(これは主要な欠点よりも迷惑ですが)だったとして便利ではありません.
あなたが複製を解決するためのより良いアイデア(または解決策)を持っている場合は、私はそれについて聞いてみたい.さもなければ誰かのために有益であることを願っています.