【问题标题】：How do I get angular 2 cli to copy css and other necessary files to dist folder如何让 angular 2 cli 将 css 和其他必要文件复制到 dist 文件夹
【发布时间】：2016-03-11 19:12:23
【问题描述】：

我已经设置了 angular 2 typescript 解决方案并添加了材料 angular 2 npm 包。

npm install -g angular-cli
ng new PROJECT_NAME
cd PROJECT_NAME
ng build

一切都很好地从我的脚手架源文件夹复制到 dist 文件夹。

然后我添加angular 2材质的npm包：

npm install ng2-material --save

但是从这里我该怎么办？如何告诉 build 命令将必要的文件从 node_modules 复制到 dist 文件夹。

确保这些文件被复制到 dist/vendor 文件夹的魔法在哪里？

<body>
  <timer-app>Loading...</timer-app>

  <script src="vendor/es6-shim/es6-shim.js"></script>
  <script src="vendor/systemjs/dist/system-polyfills.js"></script>
  <script src="vendor/angular2/bundles/angular2-polyfills.js"></script>
  <script src="vendor/systemjs/dist/system.src.js"></script>
  <script src="vendor/rxjs/bundles/Rx.js"></script>

  <script src="vendor/angular2/bundles/angular2.dev.js"></script>
  <script src="vendor/angular2/bundles/http.dev.js"></script>
  <script src="vendor/angular2/bundles/router.dev.js"></script>
...

我的包文件最终看起来像这样： https://gist.github.com/nikolaj-kaplan/e85d5805fd67c3ba3f1f

我希望我的困惑来自于对 npm 缺乏了解。而不是角度cli。（因为更多的人将能够帮助我）。但我在这两个方面都没有太多经验。

编辑：

我确实喜欢这样： https://stackoverflow.com/a/35900837/564623

module.exports = function (defaults) {
  var app = new Angular2App(defaults, {
      vendorNpmFiles: [
          'node_modules/ng2-material/dist/ng2-material.css'
      ]
  });
  return app.toTree();
}

现在我的文件被复制了。仍然不明白 dist 文件夹中的其他文件是如何被复制的。 vendorNpmFiles 数组为空。

【问题讨论】：

我不知道 angular-cli 是否已经可以做到这一点，但我在 npm 更新后使用 gulp 从 node_modules 文件夹复制供应商文件:)
当我调用 ng build 或 ng serve 时，我上面的 html-sn-p 中的所有脚本文件都从 nodes_module 文件夹复制到 dist-文件夹。但我无法弄清楚这是如何发生的，以及如何让它与新模块一起使用。
您的解决方法无效。我正在尝试使用引导程序。
@Nikolaj：我面临同样的问题 - 需要使用 typescript-collections 和引导程序，但它不会将其文件复制到 dist/vendor/whatever。你想清楚了吗？我相信已安装的软件包需要专门设计的 packages.json 才能使这项工作开箱即用 - 我在一些有效的软件包中看到了一些特定的属性，即 _location、_installable 等，这似乎会影响这种行为。 +1

标签： angular npm angular-cli ember-cli

【解决方案1】：

不需要node_modules/前缀，vendorNpmFiles会自动在node_modules中搜索

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'ng2-material/dist/ng2-material.css'
    ]
  });
};

【讨论】：

如果不清楚，这里是angular-cli-build.js（如果我没记错的话）。
如果有帮助，我相信link 标记将是：<link rel="stylesheet" href="vendor/ng2-material/dist/ng2-material.css">。
是的，在 angular-cli-build.js 中，抱歉 ;-)
最新的angular-cli切换到webpack，现在没有angular-cli-build.js了。

【解决方案2】：

对于使用 angular-cli 创建的项目，您有文件 .angular-cli.json，您应该在其中将 css 添加到“styles”部分数组中，例如，包含引导 css在 node_modules 我添加以下行：

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],

希望对你有帮助

【讨论】：