无法将引导程序添加到Angular Typescript项目中

Question

我正在使用Angular和Typescript开发一个Web应用程序。我正在尝试添加到我的项目中。我是Angular和Typescript的新手。我点击了此链接-Angular 4: How to include Bootstrap?。当我运行项目时，它给了我错误。

我使用运行以下命令的npm安装了所需的软件包

npm install bootstrap@next --save
npm install jquery --save
npm install popper.js --save

然后在angular-cli.json中，我修改了这样的样式和脚本。

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

当我运行代码时，出现此错误。

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.min.css
Module build failed: BrowserslistError: Unknown browser major
    at error (C:\Users\Acer\Desktop\umyataung\web\node_modules\browserslist\index.js:37:11)
    at Function.browserslist.checkName (C:\Users\Acer\Desktop\umyataung\web\node_modules\browserslist\index.js:320:18)
    at Function.select (C:\Users\Acer\Desktop\umyataung\web\node_modules\browserslist\index.js:438:37)
    at C:\Users\Acer\Desktop\umyataung\web\node_modules\browserslist\index.js:207:41
    at Array.forEach (<anonymous>)
    at browserslist (C:\Users\Acer\Desktop\umyataung\web\node_modules\browserslist\index.js:196:13)
    at Browsers.parse (C:\Users\Acer\Desktop\umyataung\web\node_modules\autoprefixer\lib\browsers.js:44:14)
    at new Browsers (C:\Users\Acer\Desktop\umyataung\web\node_modules\autoprefixer\lib\browsers.js:39:28)
    at loadPrefixes (C:\Users\Acer\Desktop\umyataung\web\node_modules\autoprefixer\lib\autoprefixer.js:56:18)
    at plugin (C:\Users\Acer\Desktop\umyataung\web\node_modules\autoprefixer\lib\autoprefixer.js:62:18)
    at LazyResult.run (C:\Users\Acer\Desktop\umyataung\web\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:277:20)
    at LazyResult.asyncTick (C:\Users\Acer\Desktop\umyataung\web\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:192:32)
    at LazyResult.asyncTick (C:\Users\Acer\Desktop\umyataung\web\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (C:\Users\Acer\Desktop\umyataung\web\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:204:22)
    at processing.Promise.then._this2.processed (C:\Users\Acer\Desktop\umyataung\web\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:231:20)
    at new Promise (<anonymous>)
 @ ./node_modules/bootstrap/dist/css/bootstrap.min.css 4:14-131
 @ multi ./node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css

按照此解决方案-https://github.com/angular/angular-cli/issues/9080，我也降级了CLI

 "@angular/cli": "1.6.3" 

当我运行代码时，它给了我同样的错误。我的代码有什么问题？

Answer 1

style.css

@import '~bootstrap/dist/css/bootstrap.min.css';

您可以阅读有关如何以角度click here to read full blog about this安装和设置引导程序的完整博客，>