Kiz*_*mar 100 angular-cli angular
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 repo文档,但没有找到任何关于这个主题的用法.也许我在错误的地方？
在ToC中,有一个项目符号"向构建中添加额外的文件",但似乎该部分不存在.
Md *_*ker 127
angular-cli.json的"assets"属性可以配置为包含angular-cli webpack构建中的自定义文件.因此,将"assets"属性值配置为数组.例如:
"assets": ["assets", "config.json",".htaccess"],
上面的配置会在angular-cli webpack构建期间将config.jsn和.htaccess复制到dist文件夹中.以上设置适用于angular-cli版本1.0.0-beta.18
Mel*_*igy 61
该团队已经dist在更高版本的Angular CLI中添加了对将特定文件按原样复制到输出文件夹(默认情况下)的支持(将是beta 17或19 - 它已经在最终的1.x版本中使用了很长时间).
你只需将它添加到数组中angular-cli.json:
{
...
"apps" [
{
"root": "src",
"assets": [
"assets",
"web.config"
],
...
}
]
...
}
(注意路径是相对于src文件夹的)
我个人使用它,它工作得很好.
随着公测24,我增加了一个功能,以角CLI,它可以确保所有assets文件和文件夹从开发的WebPack服务器中运行时提供服务ng test只是没有ng serve.
它还支持在用于单元测试的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": "."
}
],
...
}
]
...
}
.
.
目前不支持此功能(从beta-16开始).我向团队提出了确切的关注(web.config文件),但它似乎不会很快发生(除非你要求CLI等).
请按照此问题进行全面讨论,以及可能的未来详
PS对于JSON文件,您可以将其放入./src/assets/.此文件夹按原样复制到./dist/assets/.这是当前的行为.
在系统日期早些时候,有另一个./public/文件夹被./dist/直接复制到了,但是这在Webpack版本中消失了,上面讨论的问题讨论过.
Anj*_*lva 10
对于 Angular 8 读者，
.htaccess需要是src/.htaccess。见下文，
"assets": [
"src/favicon.ico",
"src/assets",
"src/.htaccess"
],
确保您已将该.htaccess文件放在src项目的目录中。
并将其放入的文件是
angular.json，而不是angular-cli.json
（如果你需要一个有效的htaccess文件，那么你可以在这里找到一个 - /sf/answers/3998844671/）
就是这样。现在应该在您点击 时复制它ng build --prod=true。
希望这可以帮助某人。
干杯，
小智 7
一个解决方案(虽然在我看来有点像黑客)是在你的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是如何管理angular-cli.json的(beta.16).
因此,如果有人有一个更好的答案,扩展webpack配置为angular-cli生成的项目,我很乐意听到它.