如何在 angular-cli 构建中包含自定义文件？

Question

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

我如何告诉 angular-cli 在构建时将来自“src/assets”的文件包含在“dist”的根目录中？

我们部署到 Windows 主机并需要包含一个“web.config”文件来告诉 IIS 将所有内容路由到索引。我们是在 RC4 之前做的，但是随着所有的更新它都落空了（我不记得我们是怎么做到的）。

我一直在搜索GitHub repo docs 并没有发现任何与此主题相关的有用信息。是不是我走错地方了？

在ToC 中，有一个要点“向构建中添加额外文件”，但该部分似乎不存在。

Answer 1

angular-cli.json 文件中有一个“脚本”部分。您可以在那里添加所有第三方 javascript 文件。

Answer 2

一种解决方案（虽然在我看来有点小题大做）是在您的 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 文件作为构建输出的一部分：

                            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 配置，我很乐意听到。

Answer 3

更新

有关这方面的最新文档可在以下位置找到： https://angular.io/guide/workspace-config#assets-configuration

下面的显着变化

• 配置文件现在称为angular.json
• 路径现在是相对于项目的根目录而不是src

团队在更高版本的 Angular CLI（将是 beta 17 或 19 - 它已在最终的 1.x 版本中）添加了对将特定文件按原样复制到输出文件夹（默认为 dist）的支持年龄）。

您只需将其添加到angular-cli.json 中的数组中即可：

{ ... “应用” [ { “根”：“src”， “资产”：[ “资产”， “网络配置” ], ... } ] ... }

（注意路径是相对于src文件夹）

我个人使用它，效果很好。

从 beta 24 开始，我有 added a feature 到 Angular CLI 以确保在运行 ng test 而不仅仅是 ng serve 时从 webpack 开发服务器提供所有 assets 文件和文件夹。

它还支持在用于单元测试的 webpack 开发服务器中提供资产文件 (ng test)。
（如果您需要一些 JSON 文件进行测试，或者只是不想在控制台中看到 404 警告）。
它们已经从ng e2e 提供服务，因为它运行完整的ng serve。

它还具有更高级的功能，例如从文件夹中过滤您想要的文件，以及使输出文件夹名称与源文件夹不同：

{ ... “应用” [ { “根”：“src”， “资产”：[ “资产”， “网络配置”： { //复制此文件夹中的内容 “输入”： ”../”， // 匹配这个通配符 "glob": "*.config", // 并将它们放在`dist`下的这个文件夹中（'.'表示直接放在`dist`中） “输出”： ”。” } ], ... } ] ... }

也可以参考官方文档：Angular Guide - Workspace configuration .

---

.

[仅用于存档] 原始答案（2016 年 10 月 6 日）：

不幸的是，目前不支持此功能（从 beta-16 开始）。我向团队提出了确切的担忧（web.config 文件），但它似乎不会很快发生（除非你正在分叉 CLI 等）。

关注 this issue 以获取完整讨论和未来可能的详细信息。

附言

对于JSON文件，你可以把它放在./src/assets/。此文件夹按原样复制到 ./dist/assets/。这是当前的行为。

在 systemJS 的早期，有另一个 ./public/ 文件夹被直接复制到 ./dist/，但是在 Webpack 版本中没有了，上面提到的问题讨论了这个问题。

Answer 4

angular-cli.json 的“assets”属性可以配置为在 angular-cli webpack 构建中包含自定义文件。因此，将“资产”属性值配置为数组。 例如：

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

上述配置将在 angular-cli webpack 构建期间将 config.jon 和 .htaccess 复制到 dist 文件夹中。以上设置适用于 angular-cli 版本 1.0.0-beta.18

Answer 5

在我的例子中，我使用了 Angular 版本 5， 所以我尝试在运行 ng build --prod 命令时创建名为 Staticfile.txt 的文件。 确保给出文件扩展名，否则它不会创建文件。

Answer 6

对于 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 时，应该会复制它。

希望这对某人有所帮助。

干杯，

Answer 7

修改 angular.json。
向资产数组添加条目：

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