Question

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

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

并改变了＆＃34;样式＆＃34;和＆＃34;脚本＆＃34;添加这些行（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" ;：＆＃34; postcss＆＃34;＆＃34; sourceMap＆＃34;：假} ./ node_modules /引导/ DIST / CSS / bootstrap.css！   模块构建失败：BrowserslistError：未知的浏览器主要版本       出错（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）       at 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）       at 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：无法编译。

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

Answer 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"
  ],

修改

Internet Explorer for Bootstrap 4：

支持Internet Explorer 10+; IE9和下来不是。请注意，IE10中不完全支持某些CSS3属性和HTML5元素，或者需要前缀属性才能获得完整功能。访问我可以使用...了解有关CSS3和HTML5功能的浏览器支持的详细信息。

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

Answer 2

我使用此命令安装bootstrap版本并使用jquery，它对我有用。希望它也适合你。

＆＃34; npm install bootstrap@4.0.0-beta.2 popper.js jquery --save＆＃34;

Bootstrap 4无法使用Angular 2应用

2 个答案: