使用 angular-cli.json 将文件从 node_modules 移动到资产答案

【问题标题】：Move a file from node_modules to assets using angular-cli.json使用 angular-cli.json 将文件从 node_modules 移动到资产
【发布时间】：2018-04-13 18:42:18
【问题描述】：

我使用 Angular CLI 生成了一个 Angular 应用程序。而且我正在尝试将（gulp term）文件从 node_modules 传输到 app/assets 目录，这样我就可以在 app 文件夹中使用 bootstraps css。首先我认为它是由 Webpack 完成的，所以我做了“ng 弹出”来获取 ng-eject，但后来我得到了 angular-cli.json 的“资产”，它现在看起来如下：

"assets": [
    "assets",
    "favicon.ico",
    { "glob": "**/*", "input": "../node_modules/bootstrap/dist/css/", 
    "output": "./assets/" }
  ]

这不起作用。

我习惯于咕哝和吞咽，在那里您可以具体指定哪些文件将通过管道传输到哪些目录，但我很难找到关于如何使用 angular-cli 做到这一点的答案。

使用 angular-cli 和 webpack 将 css 文件从 node_modules 移动到 app/assets 的正确方法是什么？

【问题讨论】：

为什么需要移动 Bootstrap 文件？您是要编辑它们还是保持原样？
我想我已经习惯了使用 gulp/grunt。但是，将客户端文件放在客户端应用程序目录之外似乎是一种不好的做法，希望将所有客户端资源放在一个地方。另一件事是通过指向动态文件夹（如 node_module）的路径引用资源的做法，该文件夹将随着时间的推移而更新和更改。

标签： javascript typescript webpack angular-cli angular4-forms

【解决方案1】：

经过研究，我得出以下结论... 与 gulp/grunt 不同，Webpack 不使用管道编译，也不将文件传输到 bundle 文件夹，它使用加载器（css-loader、file-loader...）和 import 语句将 css 直接加载到 DOM 中。 Angular-cli 使用，因此在选择使用 Angular CLI 时，管道策略不相关。然而，css 加载（对于全局 css 和脚本）是通过使用 angular-cli.json 解决的，该 json 具有脚本/样式数组来保存全局脚本的路径和要加载到索引 html 头部的样式。显然，如果你选择 angular-cli，你就会被这种策略卡住，这种策略不太灵活，但更方便。

【讨论】：