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

Question

回复：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 中，有一个要点 "Adding extra files to the build"，但该部分似乎不存在。

Answer 1

angular-cli.json 文件中有一个 "scripts" 部分。您可以在此处添加所有第三方 javascript 文件。

Answer 2

一个解决方案（虽然在我看来有点 hack）是在你的 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

Update

The most current documentation on this can be found at: https://angular.io/guide/workspace-config#assets-configuration

Notable Changes From Below

The configuration file is now called angular.json

The path is now relative to the root of the project not src

该团队在更高版本的 Angular CLI（将是 beta 17 或 19 - 它是已经在最终 1.x 版本中发布了很长时间）。

您只需将它添加到 angular-cli.json 中的数组中，例如：

{
  ...
  "apps" [
    {
       "root": "src",
       "assets": [
         "assets",
         "web.config"
       ],
       ...
    }
  ]
  ...
}

~~(注意路径是相对于src文件夹)~~

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

~~从 beta 24 开始，我有 added a feature 到 Angular CLI，确保当运行 ng test 不仅仅是 ng serve.~~

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

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

{
  ...
  "apps" [
    {
      "root": "src",
      "assets": [
        "assets",
        "web.config":
        {
          // Copy contents in this folder
          "input": "../",
          // That matches this wildcard
          "glob": "*.config",
          // And put them in this folder under `dist` ('.' means put it in `dist` directly)
          "output": "."
        }
      ],
      ...
    }
  ]
  ...
}

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

.

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

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

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

P.S.

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

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

Answer 4

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

"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 目录中。

and the file to put that in is angular.json, not the angular-cli.json

（如果您需要一个有效的 htaccess 文件，那么您可以在这里找到一个 - ）

就是这样。现在应该在您点击 ng build --prod=true.

时复制

希望这对某人有所帮助。

干杯，

Answer 7

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

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

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

How to include custom files with angular-cli build?

angular-cli

angular

Update

Notable Changes From Below

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

P.S.