Question

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

如何告诉angular-cli包含来自＆＃34; src / assets＆＃34;的文件？在＆＃34; dist＆＃34;的根源什么时候建立？

我们部署到Windows主机并需要包含＆＃34; web.config＆＃34;文件告诉IIS将所有内容路由到索引。我们正在做这个预备RC4，但随着所有更新它落在了裂缝中（我不记得我们是如何做到的）。

我一直在搜索GitHub repo docs并且找不到与此主题相关的任何内容。也许我在错误的地方？

在ToC中，有一个要点＆＃34;在构建中添加额外的文件＆＃34;，但似乎该部分不存在。

Answer 1

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="loremipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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

Answer 2

当前正确答案：

团队已添加支持将特定文件按原样复制到输出文件夹（默认情况下为dist），在更高版本的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，确保在运行assets而不仅仅是ng test时从webpack dev服务器提供所有ng serve个文件和文件夹{1}}。~~

它还支持在用于单元测试的webpack dev服务器中提供资产文件（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": "." } ], ... } ] ... }

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

目前不支持此功能（从beta-16开始）。我向团队提出了确切的关注（web.config文件），但它似乎不会很快发生（除非你要求CLI等）。

关注this issue以获取完整的讨论和未来可能的详细信息。
附：
对于JSON文件，您可以将其放在./src/assets/中。此文件夹按原样复制到./dist/assets/。这是当前的行为。

在系统日期之前，有另一个./public/文件夹直接复制到./dist/，但这在Webpack版本中消失了，上面讨论的问题讨论过。

Answer 3

一个解决方案（虽然在我看来有点像黑客）是在main.ts文件中声明一个变量，该变量需要你想要包含在webpack构建输出中的额外文件。

EX：

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.json（beta.16）来确定angular-cli如何管理它的正面或反面。

因此，如果有人有更好的答案扩展webpack配置以生成angular-cli生成的项目，我很乐意听到它。

Answer 4

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

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目录中。（如果您需要有效的htaccess文件，则可以在此处找到一个文件-https://stackoverflow.com/a/57126352/767625）

就是这样。现在，当您按下ng build --prod=true时，应该将其复制。

希望这对某人有帮助。

干杯

Answer 7

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

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

如何使用angular-cli构建包含自定义文件？

7 个答案:

当前正确答案：

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