如何获得angular 2 cli将css和其他必要文件复制到dist文件夹

Question

I have set up an angular 2 typescript solution and added the material angular 2 npm package. 我已经设置了一个有角度的2打字稿解决方案，并添加了材料角2 npm包。

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

Everything is nicely copied from my scaffolded source folder to a dist folder. 一切都很好地从我的脚手架源文件夹复制到dist文件夹。

Then I add the angular 2 material npm package: 然后我添加了角度2材质npm包：

npm install ng2-material --save

But what do I do from here? 但是我从这里做什么？ How do I tell the build command to copy the necessary files from node_modules to the dist folder. 如何告诉build命令将必需的文件从node_modules复制到dist文件夹。

And where is the magic located that makes sure that these files get copied to the dist/vendor folder? 神奇的位置确保将这些文件复制到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>
...

My package file ends up looking like this: https://gist.github.com/nikolaj-kaplan/e85d5805fd67c3ba3f1f 我的包文件最终看起来像这样： https ： //gist.github.com/nikolaj-kaplan/e85d5805fd67c3ba3f1f

I hope my confusion comes from a lack of knowledge about npm. 我希望我的困惑来自缺乏关于npm的知识。 And not angular cli. 而不是角度cli。 (Because more people will be able to help me). （因为更多的人能够帮助我）。 But I haven't got a whole lot of experience in either. 但我也没有很多经验。

Edit: 编辑：

I did like this: https://stackoverflow.com/a/35900837/564623 我喜欢这样： 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();
}

Now my files are copied. 现在我的文件被复制了。 Still don't understand how the other files in the dist-folder gets copied. 仍然不明白dist文件夹中的其他文件是如何被复制的。 The vendorNpmFiles array was empty. vendorNpmFiles数组为空。

Answer 1

You don't need node_modules/ prefix, vendorNpmFiles automatically search in node_modules 您不需要node_modules /前缀，vendorNpmFiles会自动搜索node_modules

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

Answer 2

With a project created with angular-cli you have the file .angular-cli.json where you should add the css in the "styles" section array, for example, to include the bootstrap css inside node_modules I add the following line: 使用angular-cli创建的项目，你有文件.angular-cli.json ，你应该在“styles”部分数组中添加css，例如，在node_modules中包含bootstrap css我添加以下行：

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

I hope this help you 我希望这对你有帮助

如何获得angular 2 cli将css和其他必要文件复制到dist文件夹

问题描述

Edit: 编辑：

2 个解决方案

解决方案1
3 2016-04-27 09:46:16

解决方案2
1 2017-02-27 23:17:18

如何获得angular 2 cli将css和其他必要文件复制到dist文件夹

问题描述

Edit: 编辑：

2 个解决方案

解决方案1 3 2016-04-27 09:46:16

解决方案2 1 2017-02-27 23:17:18

解决方案1
3 2016-04-27 09:46:16

解决方案2
1 2017-02-27 23:17:18