如何让Angular 2 CLI将CSS和其他必要文件复制到dist文件夹中？

Question

如何让Angular 2 CLI将CSS和其他必要文件复制到dist文件夹中？

5

我搭建了一个Angular 2 TypeScript解决方案，并添加了Material 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

但是，我该从哪里开始呢？我该如何告诉构建命令将必要的文件从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的了解不足，而不是angular cli。（因为更多的人能够帮助我）。但是我两者都没有太多经验。

编辑：我做了以下操作: https://dev59.com/tlsV5IYBdhLWcg3w4iA_#35900837

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

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

- Nikolaj

我不知道angular-cli是否已经可以做到这一点，但是在npm更新后，我使用gulp从node_modules文件夹中复制供应商文件 :) - Poul Kruijt

2

当我调用ng build或ng serve时，我的html-snippet中的所有脚本文件都从nodes_module文件夹复制到dist文件夹中。但我无法弄清楚这是如何发生的，以及如何使其与新模块一起工作。 - Nikolaj

你的解决方法不起作用。我正在尝试使用Bootstrap。 - Guillaume

@Nikolaj：我面临同样的问题-需要使用typescript-collections和bootstrap，但它不会将其字段复制到dist/vendor/whatever。你解决了吗？我相信安装的包需要一个特别精心制作的packages.json才能开箱即用-我在一些可以工作的包中看到了一些特定的属性，例如_location，_installable 等，这似乎会影响此行为。+1 - jweyrich

2个回答

1

使用angular-cli创建的项目中，有一个名为.angular-cli.json的文件，你需要在“styles”部分数组中添加CSS样式。例如，如果要在node_modules中包含bootstrap css，则需要添加以下行：

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

我希望这可以帮助你。

- Pablo Ezequiel Inchausti

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Antoine · Accepted Answer

您不需要在路径中添加 "node_modules/" 前缀，因为 "vendorNpmFiles" 会自动在 "node_modules" 中搜索。

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