在 Angular 2 cli 项目中集成引导程序答案

【问题标题】：Integrating bootstrap in Angular 2 cli project在 Angular 2 cli 项目中集成引导程序
【发布时间】：2017-11-29 21:22:46
【问题描述】：

将 Bootstrap 与 Angular 2 cli 集成时面临的问题。我是 angular 2 CLI 的新手，如果我的步骤有误，请指导我并纠正我。提前致谢。

后续步骤：
1. npm install bootstrap@next --save
2.修改.angular-cli.json文件
这是我修改的：

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

使用 ng serve 重启应用

出现如下错误：

多脚本加载器中的错误！./~/jquery/dist/jquery.js 脚本加载器！./~/tether/dist/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js 找不到模块：错误：无法解决 '/Users/sagarbhanushali/projectangularcliyoutube/myProject/node_modules/tether/dist/tether.js' 在 '/Users/sagarbhanushali/projectangularcliyoutube/myProject/node_modules/@angular/cli/models/webpack-configs' @multi script-loader!./~/jquery/dist/jquery.js 脚本加载器！./~/tether/dist/tether.js 脚本加载器！./~/bootstrap/dist/js/bootstrap.js

我是 angular 2 CLI 的新手，如果我的步骤有误，请指导我并纠正我。提前致谢。

【问题讨论】：

你能发布你的 package.json 文件吗？我看起来你遇到了关于 tether.js 的问题，而不是 bootstrap。
是的，所有的包最初都没有一起加载，因此使用了 bootstrap-loader 并且问题得到了解决。谢谢

标签： jquery node.js twitter-bootstrap angular angular2-routing

【解决方案1】：

已解决... 使用引导加载程序来解决它。运行以下命令。 1. npm install --save resolve-url-loader --dev 2. npm i --save-dev bootstrap@next bootstrap-loader 系绳 jquery

【讨论】：

首先感谢您的回答。您是否有规范的参考资料，或任何导致您获得此答案的资料？或者只是敲打直到它起作用？此外，--dev 已被弃用。我建议遵循npm's 的建议，npm WARN install Usage of the --dev` 选项已弃用。请改用--only=dev。` 以使您的答案在更长的时间内更具相关性。