在包含引导程序时编译我的Angular应用程序时遇到问题。我是Angular的新手,但之前我曾经使用过这个,我认为以下是我必须做的所有事情,但是我无法让它工作。
我使用以下命令通过Powershell从CLI安装了引导程序:
npm install bootstrap --save
我似乎已经在我的node_modules文件夹中看到了它。
我在.angular-cli.json的[样式]部分中包含了Boostrap样式行
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
但是当我尝试使用ng serve
启动我的角度应用时,我收到以下错误:
PS C:\ angular \ apps \ MyApp \ MyApp.webapp>服务 ** NG Live Development Server正在侦听localhost:4200,在http://localhost:4200/上打开浏览器** 日期:2018-01-22T22:55:02.306Z 哈希:55d32425f16b07bf6645 时间:46713毫秒 chunk {inline} inline.bundle.js,inline.bundle.js.map(inline)5.83 kB [entry] [rendered] chunk {main} main.bundle.js,main.bundle.js.map(main)8.64 kB {vendor} [initial] [rendered] chunk {polyfills} polyfills.bundle.js,polyfills.bundle.js.map(polyfills)218 kB {inline} [initial] [rendered] chunk {styles} styles.bundle.js,styles.bundle.js.map(styles)14.7 kB {inline} [initial] [rendered] chunk {vendor} vendor.bundle.js,vendor.bundle.js.map(vendor)2.3 MB [initial] [rendered]
./node_modules/css-loader中的错误?
{ “sourceMap”:假的, “importLoaders”:1}!./ node_modules / postcss装载机
?{ “标识”: “postcss”} ./ node_modules /引导/距离/ CSS / bootstrap.min.css!
模块构建失败:BrowserslistError:未知的浏览器查询>= 1%
有误
(C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ browserslist \
index.js:37:11)
在C:\ angular \ apps \ MyApp \ MyApp.webapp \ node_modules \ browserslist \
index.js:222:9在Array.forEach(native)
在browserslist中
(C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ browserslist \
index.js:196:13)
在Browsers.parse
(C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ autoprefixer \ lib中\
browsers.js:44:14)在新浏览器上
(C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ autoprefixer \ lib中\
browsers.js:39:28)
在loadPrefixes
(C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ autoprefixer \ lib中\
autoprefixer.js:56:18)插件
(C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ autoprefixer \ lib中\
autoprefixer.js:62:18)在LazyResult.run
(C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ postcss \ lib中\
懒惰result.js:274:20)
在LazyResult.asyncTick
(C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ postcss \ lib中\
懒惰result.js:189:32)
在LazyResult.asyncTick
(C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ postcss \ lib中\
懒惰result.js:201:22)
在processing.Promise.then._this2.processed
(C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ postcss \ lib中\
懒惰result.js:228:20)
在LazyResult.async
(C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ postcss \ lib中\
懒惰result.js:225:27)
在LazyResult.then
(C:\角\应用\ MyApp的\ MyApp.webapp \ node_modules \ postcss \ lib中\
懒惰result.js:131:21)
在C:\ angular \ apps \ MyApp \ MyApp.webapp \ node_modules \ postcss-loader \
index.js:129:55
@ ./node_modules/bootstrap/dist/css/bootstrap.min.css 4:14-127
@ multi ./node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css
webpack:无法编译。
当我从[样式]部分删除了增强线时,错误消失。
知道造成这种情况的原因是什么?
由于
答案 0 :(得分:1)
上述方法对我不起作用。当我尝试构建项目时,找不到包引用,并显示以下错误消息。
我使用的是“ node_modules / bootstrap / dist / css / bootstrap.min.css”,而不是使用“ ../ node_modules / bootstrap / dist / css / bootstrap.min.css ” ”在 angular.json 中的包参考中。
答案 1 :(得分:0)
当我关注我正在关注的教程中的笔记时,我写下了安装bootstrap
3.x的说明,我必须使用以下命令行:
npm install bootstrap --save
并安装bootstrap
4.x,我必须使用以下命令
npm install bootstrap@next --save
但当我为package.json
打开bootstrap
时,我注意到它引用了4.0。
要解决我的问题,我转到我的node_modules
文件夹并卸载了当前版本的boostrap
:
npm uninstall bootstrap --save
并重新安装4.0之前的最高版本,即
npm install bootstrap@3.3.7 --save
这解决了我的问题,我的应用程序现在按预期运行ng server
时,我的原始帖子中提到的引导样式行包含在[style]问题中。
希望这有助于其他人。
答案 2 :(得分:0)
版本: Angular 6
cli:6.2.3(ng --version)
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/style.css"
],