angular-cliビルドでカスタムファイルを含める方法は？

RE：Angular2 2.0.0、angular-cli v1.0.0-beta.11-webpack.8

ビルド時に「dist」のルートに「src / assets」のファイルを含めるようにangular-cliに指示するにはどうすればよいですか？

Windowsホストにデプロイし、すべてをインデックスにルーティングするようにIISに指示するための「web.config」ファイルを含める必要があります。私たちはこれをRC4よりも前に行っていましたが、すべての更新で亀裂が入りました（どのようにしたか覚えていません）。

私はGitHubリポジトリのドキュメントを精査しており、このトピックに関して何の役にも立ちませんでした。多分私は間違った場所にいますか？

で目次、そこに「ビルドに余分なファイルを追加する」の箇条書きですが、そのセクションが存在しません表示されます。

angular-cli.jsonの「assets」プロパティは、angular-cli webpackビルドにカスタムファイルを含めるように構成できます。したがって、 "assets"プロパティ値を配列として構成します。例えば：

"assets": ["assets", "config.json",".htaccess"],

上記の構成では、angular-cli Webpackのビルド中にconfig.jsnと.htaccessがdistフォルダーにコピーされます。上記の設定はangular-cliバージョン1.0.0-beta.18で機能しました

現在の正解：

チームはdist、Angular CLIの新しいバージョン（ベータ17または19である-将来的には1.xの最終リリースに含まれる）の特定のファイルをそのまま（デフォルトで）出力フォルダーにコピーするためのサポートを追加しました。

次のangular-cli.jsonように配列に追加するだけです：

{
  ...
  「アプリ」[
    {
       "ルート"： "ソース"、
       "資産"：[
         "資産"、
         「web.config」
       ]、
       ...
    }
  ]
  ...
}

（パスはsrcフォルダからの相対パスであることに注意してください）

個人的に使用していますが、問題なく動作します。

ベータ24の時点で、Angular CLIに機能を追加しました。この機能は、だけでなくassets、実行時にすべてのファイルとフォルダーがwebpack開発サーバーから提供されるようにします。ng testng serve

また、単体テストに使用されるwebpack開発サーバーでのアセットファイルの提供もサポートしています（ng test）。
（テストにいくつかのJSONファイルが必要な場合、またはコンソールで404警告を表示したくない場合）。フル稼働しているため、
すでに提供されng e2eていますng serve。

また、フォルダーから必要なファイルをフィルタリングしたり、出力フォルダー名をソースフォルダーとは異なるものにするなど、より高度な機能も備えています。

{
  ...
  「アプリ」[
    {
      "ルート"： "ソース"、
      "資産"：[
        "資産"、
        「web.config」：
        {
          //このフォルダの内容をコピーします
          "入力"： "../"、
          //これはこのワイルドカードに一致します
          "グロブ"： "*。config"、
          //それらをこのフォルダの「dist」の下に配置します（「。」は直接「dist」に配置することを意味します）
          "出力"： "。"
        }
      ]、
      ...
    }
  ]
  ...
}

また、公式ドキュメント「Angular Guide-Workspace configuration」を参照することもできます 。

。

[アーカイブ専用]元の回答（2016年10月6日）：

これは残念ながら現在サポートされていません（ベータ16以降）。私はチーム（web.configファイル）に正確な懸念を提起しましたが、すぐには発生しないようです（CLIなどをフォークしない限り）。

完全な議論と可能な将来の詳細については、この問題に従ってください。

JSONファイルの場合は、に配置できます./src/assets/。このフォルダはそのままにコピーされます./dist/assets/。これは現在の動作です。

systemJSの時代の初めには./public/、./dist/直接コピーされる別のフォルダーがありましたが、これはWebpackバージョンではなくなりました。

（私の意見では少しハックですが）1つの解決策main.tsは、webpackビルド出力に含めたい追加のファイルを必要とするファイル内の変数を宣言することです。

例：

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

/* HACK: Include standalone web.config file manually in webpack build
 *
 * Due to the way the beta angular-cli abstracts the webpack config files into
 * angular-cli.json and lacks current documentation we were unable to find
 * a way to include additional files manually in the webpack build output.
 *
 * For hosting on IIS we need to include a web.config file for
 * specifying rewrite rules to make IIS compatible with the Angular Router.
 * The one liner following this comment is a hack to accomplish this
 * and should be reviewed and corrected as soon as adequete documentation
 * is available for the angular-cli configuration file.
 */
const webConfig = require('file?name=[name].[ext]!./web.config');

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

webpackがこの変数宣言ステートメントに遭遇main.tsするweb.configと、ビルド出力の一部としてraw ファイルを出力します。

                            Asset       Size  Chunks             Chunk Names
                       inline.map    5.59 kB       2  [emitted]  inline
                       web.config  684 bytes          [emitted]
                 styles.bundle.js    16.7 kB    1, 2  [emitted]  styles
                        inline.js    5.53 kB       2  [emitted]  inline
                         main.map    5.36 MB    0, 2  [emitted]  main
                       styles.map    22.6 kB    1, 2  [emitted]  styles
                   main.bundle.js    4.85 MB    0, 2  [emitted]  main
                       index.html    1.98 kB          [emitted]
                assets/.npmignore    0 bytes          [emitted]
         assets/styles/global.css    2.74 kB          [emitted]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  4.45 kB       0
webpack: bundle is now VALID.

理想的な解決策はwebpack構成ですが、angular-cliがそれをどのように管理してangular-cli.jsonいるかについては、まだはっきりしていません（beta.16）。

したがって、angular-cliで生成されたプロジェクトのwebpack構成を拡張するより良い答えがある人がいれば、ぜひ聞いてみたいと思います。

Angular 8リーダーの場合、

.htaccessする必要がありますsrc/.htaccess。下記参照、

 "assets": [
    "src/favicon.ico",
     "src/assets",
     "src/.htaccess"
  ],

.htaccessファイルがsrcプロジェクトのディレクトリ内に配置されていることを確認してください。

そしてそれを入れるファイルはangular.json、ではなくangular-cli.json

（有効なhtaccessファイルが必要な場合は、ここで見つけることができます-https://stackoverflow.com/a/57126352/767625）

それでおしまい。これで、を押すとコピーされるはずですng build --prod=true。

これが誰かを助けることを願っています。

乾杯、

angular-cli.jsonファイルに「scripts」セクションがあります。そこで、サードパーティのjavascriptファイルをすべて追加できます。

私の場合、Angularバージョン5を使用したため、ng build --prodコマンドを実行するときにStaticfile.txtというファイルを作成しようとしました。ファイル拡張子を必ず指定してください。そうしないと、ファイルが作成されません。

angular.jsonを変更します。
アセット配列にエントリを追加します。

{
  "glob": "**/web.config",
  "input": "src/",
  "output": "./"
}