如何包括自定义文件的角度-cli 建设？

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

一种解决方案(尽管在我看来有点不靠谱)是在 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.json来管理它的(beta.16)。

因此，如果有人有一个更好的答案，扩展了角斜面生成项目的 webpack 配置，我很乐意听到它。

更新

关于这方面的最新文件可以在以下网址找到: Https://angular.io/guide/workspace-config#assets-configuration

从下面显著的变化

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

在 Angular CLI 的更新版本中，团队增加了支持将特定文件按原样复制到输出文件夹(默认情况下是 dist)的功能(可能是 beta 17或19——它已经在最终的1.x 版本中使用了很长时间)。

你只需要把它添加到 angular-cli.json的数组中，就像这样:

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

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

我个人使用它，它工作得很好。

在 beta 24中，我使用了 增加了一个功能到 Angular CLI，确保所有的 assets文件和文件夹在运行 ng test而不仅仅是 ng serve时都能从 webpack dev 服务器获得。

它还支持在用于单元测试的 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": "."
}
],
...
}
]
...
}

您还可以参考官方文档: < a href = “ https://Angular.io/Guide/Workspace-config # asset-configuration”rel = “ noReferrer”> Angular Guide-Workspace configuration .

.

原始答案(2016年10月6日) :

不幸的是，目前还不支持这种方式(从 beta-16开始)。我向团队提出了确切的关注点(web.config 文件) ，但是这似乎不会很快发生(除非您分叉了 CLI 等)。

按照 这个问题的完整讨论和可能的未来细节。

附言。

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

在 system js 的早些时候，还有另一个 ./public/文件夹被直接复制到 ./dist/，但是在 Webpack 版本中已经没有了，上面提到的问题已经讨论过了。

角斜率的“资产”性质。可以将 json 配置为在 angle-cli webpack 构建中包含自定义文件。因此，将“资产”属性值配置为数组。 例如:

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

上面的配置将复制 config.jon 和。Htaccess 进入 dist 文件夹的角-cli webpack 构建过程中。以上设置工作的角-cli 版本1.0.0-beta.18

我用的是 角度版本5, 因此，我尝试在运行 ng build —— prod 命令时创建名为 静态文件的文件。 确保给出文件扩展名，否则它不会创建文件。

对于 Angular 8的读者来说,

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