5

我已经设置了一个 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

但是我从这里做什么？如何告诉构建命令将必要的文件从 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 数组为空。

4

2 回答 2

3

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

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'ng2-material/dist/ng2-material.css'
    ]
  });
};
于 2016-04-27T09:46:16.927 回答
1

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

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

我希望这对你有帮助

于 2017-02-27T23:17:18.983 回答