相关疑难解决方法(0)

如何将bootstrap添加到angular-cli项目中

我们想在使用angular-cli 1.0.0-beta.5(w/node v6.1.0)生成的应用程序中使用bootstrap 4(4.0.0-alpha.2).

在使用npm获取引导程序及其依赖项后,我们的第一种方法是将它们添加到angular-cli-build.js:

  'bootstrap/dist/**/*.min.+(js|css)',  
  'jquery/dist/jquery.min.+(js|map)',  
  'tether/dist/**/*.min.+(js|css)',
Run Code Online (Sandbox Code Playgroud)

并将它们导入我们的 index.html

  <script src="vendor/jquery/dist/jquery.min.js"></script>
  <script src="vendor/tether/dist/js/tether.min.js"></script>
  <link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
  <script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
Run Code Online (Sandbox Code Playgroud)

这很好用,ng serve但是一旦我们生成了带有-prod标志的构建,所有这些依赖关系都消失了dist/vendor(惊喜!).

我们打算如何在使用angular-cli生成的项目中处理这种情况(即加载引导程序脚本)?

我们有以下想法,但我们真的不知道要走哪条路......

  • 使用CDN?但我们宁愿提供这些文件以保证它们可用

  • 复制依赖关系到dist/vendor我们之后ng build -prod?但这似乎是angular-cli应该提供的东西,因为它"照顾"构建部分?

  • 在src/system-config.ts中添加jquery,bootstrap和tether,并以某种方式将它们拉入main.ts中的bundle中?但考虑到我们不打算在我们的应用程序代码中明确使用它们(例如,不像moment.js或像lodash这样的东西),这似乎是错误的

twitter-bootstrap angular-cli angular

214
推荐指数
15
解决办法
34万
查看次数

标签 统计

angular ×1

angular-cli ×1

twitter-bootstrap ×1