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

142

关于 Angular2 2.0.0 和 angular-cli v1.0.0-beta.11-webpack.8:

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

我们部署到Windows主机上,并需要包含一个"web.config"文件以告诉IIS将所有内容路由到index。我们之前在RC4之前这样做,但随着所有更新的进行,它被忽略了(我不记得我们是怎么做的)。

我一直在搜寻GitHub repo docs,但没有找到有关此主题的任何有用信息。也许我错了地方?

目录中,有一个项目是“添加额外的文件到构建中”,但似乎该部分不存在。


2
基本上你可以使用npm复制文件。只需将复制命令添加到package.json的脚本中即可。还可以查看这个链接http://lucasmreis.github.io/blog/npm-is-an-amazing-build-tool/。 - Vadim Sentiaev
我最终采取的方法(看起来也有些hacky):安装了一个文件复制npm包,然后在“package.json”的“scripts”部分中添加了一个值,如下所示:“copy:webConfig”:“node node_modules/copy/bin/cli.js web.config dist”。我还添加了一个后构建脚本:“postbuild”:“npm run copy:webConfig”。尝试让复制工作时还遇到了其他问题,但这个方法解决了问题。 - Kizmar
嗯,我有与Azure IIS规则和Angular CLI完全相同的要求 - 如果可能的话,也不想添加更多的构建步骤。 - Rodney
这里的答案是正确的,但如果您需要在不同环境中复制不同的文件,我建议阅读:https://dev59.com/ZKfja4cB1Zd3GeqPzrOe#59162533 - Manuel Lopera
7个回答

175

angular-cli.json的"assets"属性可以配置自定义文件以包含在angular-cli webpack构建中。因此,将"assets"属性值配置为数组。

例如:

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

在angular-cli webpack构建过程中,上述配置将会把config.jon和.htaccess复制到dist文件夹中。该设置适用于angular-cli版本1.0.0-beta.18。


7
需要放在“应用程序”下面,例如:“应用程序”:[ { “资产”:[“config / appConfig.json”] }] - Manny
看起来是正确的,但对我不起作用。 "assets": "assets" 和 "assets": ["assets"] - 可以工作,但 "assets": ".htaccess","assets": ["assets", ".htaccess"] - 无法工作。有什么建议吗? - Gleb
@Kizmar:当我尝试使用“web.config”时,它会失败并显示“模块解析失败”。 “模块解析失败...您可能需要一个应用程序加载器...等等。您遇到过这种情况吗? - Rodney
1
好的,忽略它,只是个打字错误 - 它现在可以运行了。所以 Web.config 需要放在 Src 文件夹的根目录下,然后 JSON 文件看起来像这样: "assets": [ "assets", "web.config" ]。 - Rodney
“assets” 数组位于文件 'angular.json' 中,而不是 Angular 12 中的 'angular-cli.json',从其他答案中我看到它从至少 Angular 8 开始就是这样工作的。 - waldrabe
显示剩余3条评论

87

更新

有关此内容的最新文档可在以下链接找到: https://angular.io/guide/workspace-config#assets-configuration

与以下版本的显著变化

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

团队已经在 Angular CLI 的后续版本(可能是 beta 17 或 19 - 已经在 final 1.x releases 中存在了很长时间)中添加了支持将特定文件原样复制到输出文件夹(默认为dist)的功能。

只需将其添加到angular-cli.json数组中,如下所示:

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

(请注意,路径相对于src文件夹)

我个人使用它,它完全可以正常工作。

从beta 24开始,我已经添加了一个功能到Angular CLI中,确保在运行ng test时,所有的assets文件和文件夹都是从webpack dev server提供的,而不仅仅是ng serve

它还支持在用于单元测试的webpack dev server中提供资产文件(ng test)。
(如果您需要一些JSON文件进行测试,或者只是讨厌在控制台中看到404警告)。
它们已经从ng e2e中提供,因为它运行了完整的ng serve

它还有更高级的功能,比如过滤你想要的文件夹中的文件,并且使输出文件夹名称与源文件夹不同:

{
  ...
  "apps": [
    {
      "root": "src",
      "assets": [
        "assets",
        "web.config": {
          // 将此文件夹中的内容复制
          "input": "../",
          // 匹配此通配符
          "glob": "*.config",
          // 并将它们放在`dist`文件夹下的此文件夹中('.'表示直接放在`dist`中)
          "output": "."
        }
      ],
      ...
    }
  ]
  ...
}

您还可以参考官方文档:Angular指南-工作区配置


.

[仅供存档] 原回答(2016年10月6日):

很遗憾,目前还不支持这个功能(截至beta-16版本)。我向团队提出了确切的问题(web.config文件),但看起来短时间内不会实现(除非您分叉CLI等)。

请关注this issue以获取完整讨论和可能的未来细节。

附言

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

在systemJS时代,还有另一个./public/文件夹,它直接被复制到./dist/中,但在Webpack版本中已经消失,上面提到的问题进行了讨论。


2
这个配置对我有效: { "glob": "**/*", "input": "src/assets", "output": "/assets" } - patrickbadley
1
根据当前的Angular资产配置,您应该将此对象添加到资产列表中:{ "input": "./", "glob": "*.config", "output": "."}。在这种情况下,配置文件位于与angular.json相同的位置(即项目的根目录),构建后它将出现在dist文件夹内的项目根目录中。 - Odilbek Utamuratov

12

对于Angular 8读者,

.htaccess需要更改为src/.htaccess。请参见下面的内容。

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

请确保已将.htaccess文件放置在项目的src目录中。

需要放置文件的是angular.json,而不是angular-cli.json

(如果您需要有效的htaccess文件,则可以在此处找到 - https://dev59.com/P63la4cB1Zd3GeqPN4PD#57126352

这样就可以在运行ng build --prod=true时进行复制了。

希望能对某人有所帮助。

谢谢!


3
需要修改的文件是 angular.json,而不是之前提到的 angular-cli.json - mMerlin
1
仍然适用于 Angular 12(2021)。如果您使用 Angular CLI 生成项目,则“assets”数组已经存在于 angular.json 中。您只需在其中添加您的文件即可。 - waldrabe
感谢@waldrabe对Angular 12的检查。干杯。 - Anjana Silva

7

一个解决方案(尽管我认为有点欺骗)是在您的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配置,我很乐意听取建议。

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

1
是的,但 web.config 不是 JavaScript 文件。它会在不指望它是 JS 的情况下复制并与其余 JS 捆绑吗? - Kizmar
1
@Kizmar,是的,这样行不通。它会尝试(并失败)将其加载为js。 - Nathan Cooper

1

修改angular.json文件。
向assets数组中添加条目:

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

0
在我的情况下,我使用的是Angular 5版本, 因此我尝试在运行ng build --prod命令时创建名为Staticfile.txt的文件。 请确保给出文件扩展名,否则它将不会创建该文件。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接