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

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

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

我们部署到Windows主机，需要包含一个“ web.config”文件来告诉IIS将所有内容路由到索引。我们在RC4之前就已经进行了此操作，但是由于所有更新，它都陷入了裂缝（我不记得我们是如何做到的）。

我一直在搜索GitHub存储库文档，但没有发现有关此主题的任何用处。也许我在错误的地方？

在ToC中，有一个项目符号“向构建中添加其他文件”，但是似乎该节不存在。

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

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

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

当前正确答案：

该团队增加了对将特定文件按原样复制到输出文件夹（dist默认情况下）的支持，该版本在Angular CLI的更高版本中（将为beta 17或19-已经存在于最终的1.x版本中）。

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

{
  ...
  “应用” [
    {
       “ root”：“ src”，
       “资产”：[
         “资产”，
         “ web.config”
       ]，
       ...
    }
  ]
  ...
}

（请注意，该路径是相对于src文件夹的）

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

从beta 24开始，我在Angular CLI中添加了一项功能，该功能可确保assets运行时（ng test不仅仅是）从webpack开发服务器提供所有文件和文件夹ng serve。

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

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

{
  ...
  “应用” [
    {
      “ root”：“ src”，
      “资产”：[
        “资产”，
        “ web.config”：
        {
          //复制此文件夹中的内容
          “ input”：“ ../”，
          //与此通配符匹配
          “ glob”：“ * .config”，
          //并将它们放在“ dist”下的此文件夹中（“。”意味着直接将其放在“ dist”中）
          “输出”：“。
        }
      ]，
      ...
    }
  ]
  ...
}

您还可以参考官方文档：Angular Guide-Workspace配置 。

。

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

不幸的是，当前不支持此功能（自beta-16起）。我向团队提出了确切的问题（web.config文件），但是这似乎不会很快发生（除非您分叉了CLI等）。

请关注此问题，以进行全面讨论和将来可能的详细信息。

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

在systemJS的早期，有另一个./public/文件夹./dist/直接复制到其中，但是在Webpack版本中已经消失了，上面提到的问题对此进行了讨论。

一种解决方案（尽管我认为这有点不合时宜）是在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问题（测试版16）。

因此，如果有人有更好的答案可以扩展webpack配置以生成angular-cli生成的项目，那么我很想听听。

对于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文件中有一个“脚本”部分。您可以在其中添加所有第三方javascript文件。

就我而言，我使用的是Angular版本5，因此我在运行ng build --prod命令时尝试创建名为Staticfile.txt的文件。确保提供文件扩展名，否则它将不会创建文件。

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

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