Question

我正在使用＆＃34; angular-cli＆＃34;：＆＃34; 1.0.0-beta.11-webpack.2＆＃34;

我的angular-cli-build.js我有：

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'bootstrap/dist/css/bootstrap.css'
    ]
  });
};

和我的index.html：

<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">

但是使用ng build，我在/ dist文件夹中什么都没有...这是如何与webpack完全一致的？我过去常常使用webpack和angular 1工作，现在我觉得它真的很复杂，我浪费了很多时间来猜测它必须如何工作，我看到angular-cli只是为了测试，而不是真实的工作？有一种方法可以替换angular-cli编译以旧方式用webpack覆盖它吗？

Answer 1

如果升级到1.0.0-beta.11-webpack.3或更高版本，则可以使用apps[0].styles的{{1}}属性列出要导入的外部样式表。有了这个，您不必向angular-cli.json添加任何内容。

要从index.html升级，请运行：

1.0.0-beta.11-webpack.2

从https://github.com/angular/angular-cli#updating-angular-cli开始，升级现有项目时在项目目录中运行的其他步骤如下：

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@1.0.0-beta.11-webpack.3

如果您生成一个新项目并安装Bootstrap，那么您的rm -rf node_modules dist tmp npm install --save-dev angular-cli@latest ng init应如下所示：

angular-cli.json

Answer 2

我发现使用angular-cli的工作非常不稳定，最好使用webstarte并手动完成工作，今年角度2释放候选者正在改变，而且事情很慢，对于angular-cli来说最差/ p>

https://github.com/preboot/angular2-webpack

使用bootstrap4 css的步骤：

1. npm install --save bootstrap@^4.0.0-alpha.3
2. in app.component.ts just insert:

import 'bootstrap/dist/css/bootstrap.css';

一切都是神奇而有效的：

一切都是自动的，并且没有像angular-cli那样的问题，我不建议使用最后一个来构建应用程序，只是为了生成组件或者这样思考; angular-cli实际上是非常β状态的发展。

webpack的angular-cli并不真正起作用

2 个答案: