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



我正在使用Angular和Typescript开发一个Web应用程序。我正在尝试添加到我的项目中。我是Angular和Typescript的新手。我点击了这个链接 - Angular 4:如何包含引导?当我运行我的项目时,它给了我错误。

我使用 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:UsersAcerDesktopumyataungwebnode_modulesbrowserslistindex.js:37:11)
at Function.browserslist.checkName (C:UsersAcerDesktopumyataungwebnode_modulesbrowserslistindex.js:320:18)
at Function.select (C:UsersAcerDesktopumyataungwebnode_modulesbrowserslistindex.js:438:37)
at C:UsersAcerDesktopumyataungwebnode_modulesbrowserslistindex.js:207:41
at Array.forEach (<anonymous>)
at browserslist (C:UsersAcerDesktopumyataungwebnode_modulesbrowserslistindex.js:196:13)
at Browsers.parse (C:UsersAcerDesktopumyataungwebnode_modulesautoprefixerlibbrowsers.js:44:14)
at new Browsers (C:UsersAcerDesktopumyataungwebnode_modulesautoprefixerlibbrowsers.js:39:28)
at loadPrefixes (C:UsersAcerDesktopumyataungwebnode_modulesautoprefixerlibautoprefixer.js:56:18)
at plugin (C:UsersAcerDesktopumyataungwebnode_modulesautoprefixerlibautoprefixer.js:62:18)
at LazyResult.run (C:UsersAcerDesktopumyataungwebnode_modulespostcss-loadernode_modulespostcssliblazy-result.js:277:20)
at LazyResult.asyncTick (C:UsersAcerDesktopumyataungwebnode_modulespostcss-loadernode_modulespostcssliblazy-result.js:192:32)
at LazyResult.asyncTick (C:UsersAcerDesktopumyataungwebnode_modulespostcss-loadernode_modulespostcssliblazy-result.js:204:22)
at LazyResult.asyncTick (C:UsersAcerDesktopumyataungwebnode_modulespostcss-loadernode_modulespostcssliblazy-result.js:204:22)
at processing.Promise.then._this2.processed (C:UsersAcerDesktopumyataungwebnode_modulespostcss-loadernode_modulespostcssliblazy-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" 

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

我认为您的安装和设置是正确的,但是接下来importbootstrap.min.css文件中的文件style.css像这样。

风格.css

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

您可以阅读有关如何在 Angular 中安装和设置引导程序的完整博客,单击此处阅读有关此的完整博客

最新更新