Bootstrap 4 不适用于 Angular 2 应用程序答案

【问题标题】：Bootstrap 4 not working with Angular 2 appBootstrap 4 不适用于 Angular 2 应用程序
【发布时间】：2018-06-10 05:49:43
【问题描述】：

我刚刚在 VS Code 中创建了一个新的 Angular 应用程序。我按照以下说明添加了 Bootstrap 4：

https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/

并更改了“样式”和“脚本”以添加这些行（jquery 和 popper 行是在其他一些方向上找到的，无论有没有这些，我都会遇到相同的错误）：

    "../node_modules/bootstrap/dist/css/bootstrap.css"

    "../node_modules/jquery/dist/jquery.slim.js",
    "../node_modules/popper.js/dist/umd/popper.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"

但我收到以下错误：

错误 ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./ node_modules/bootstrap/dist/css/bootstrap.css 模块构建失败：BrowserslistError: Unknown browser major 出错（D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:37:11）在 Function.browserslist.checkName (D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:320:18) 在 Function.select (D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:438:37) 在 D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:207:41 在 Array.forEach () 在 browserslist (D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:196:13) 在 Browsers.parse (D:\Users\Andrew\Documents\code\JobSolution\node_modules\autoprefixer\lib\browsers.js:44:14) 在新浏览器 (D:\Users\Andrew\Documents\code\JobSolution\node_modules\autoprefixer\lib\browsers.js:39:28) 在 loadPrefixes (D:\Users\Andrew\Documents\code\JobSolution\node_modules\autoprefixer\lib\autoprefixer.js:56:18) 在插件处（D:\Users\Andrew\Documents\code\JobSolution\node_modules\autoprefixer\lib\autoprefixer.js:62:18）在 LazyResult.run (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:270:20) 在 LazyResult.asyncTick (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:185:32) 在 LazyResult.asyncTick (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:197:22) 在 LazyResult.asyncTick (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:197:22) 在 processing.Promise.then._this2.processed (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:224:20) 在新的 Promise () @ ./node_modules/bootstrap/dist/css/bootstrap.css 4:14-127 @ multi ./src/styles.css ./node_modules/bootstrap/dist/css/bootstrap.css

webpack：编译失败。

我当然不知道这意味着什么。有什么想法吗？

【问题讨论】：

我建议看看ng-bootstrap。它适用于 Angular，只需要 Bootstrap CSS，不需要 Javascript/jQuery 代码。
我很欣赏这个想法，但这并不能真正回答我的问题。更不用说我想要完整的 Bootstrap 库及其功能。
@StarfleetSecurity 是什么让您觉得 ng-bootstrap 不支持 Bootstrap 4 的所有功能？在 Angular 应用程序中安装和加载 jQuery 只是为了支持 Bootstrap 小部件似乎效率很低。

标签： angular twitter-bootstrap bootstrap-4

【解决方案1】：

这是您正在学习的旧教程。使用此命令安装 Bootstrap 4：

npm install bootstrap@4.0.0-beta.2 popper.js jquery --save

在 angular-cli.json 中添加这些行：

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/popper.js/dist/popper.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

编辑：

用于 Bootstrap 4 的 Internet Explorer：

支持 Internet Explorer 10+； IE9及以下没有。请注意，IE10 不完全支持某些 CSS3 属性和 HTML5 元素，或者需要前缀属性才能获得完整功能。访问 Can I use... 了解浏览器对 CSS3 和 HTML5 功能的支持的详细信息。

如果您需要 IE8-9 支持，请使用 Bootstrap 3。它是我们代码的最稳定版本，我们的团队仍然支持关键错误修复和文档更改。但是，不会添加任何新功能。

【讨论】：

谢谢，这似乎有效。但是，我注意到当我在我的 HTML 中放置一个按钮时，比如在引导示例页面上，我没有得到“手”光标，它只是保持为箭头。另外，您是否指出安装“alpha”版本而不是最新的“beta”版本？另外，我注意到如果我使用 IE 导航到页面，我根本看不到按钮。但在 Chrome 和 Firefox 中似乎没问题（除了上面提到的光标问题）。
你是对的！我犯了一个错误你应该使用测试版。我只是测试它的工作。我做了编辑
我正在使用这个 IE 11，所以我仍然不确定为什么按钮没有显示。另外，为什么光标问题？这些问题是否与使用 alpha 版本有关？刚刚看到您的附加编辑。当我有机会时，我会用最新的测试版再试一次。谢谢。
我恢复到 Bootstrap 3，但 IE 仍然没有显示按钮。
成功了，谢谢。你会认为他们会让这一点更加明显。

【解决方案2】：

我使用此命令安装引导版本和 jquery，它对我有用。希望它也对你有用。

“npm install bootstrap@4.0.0-beta.2 popper.js jquery --save”

【讨论】：