Question

在包含引导程序时编译我的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＆gt;服务 ** 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：无法编译。

当我从[样式]部分删除了增强线时，错误消失。

知道造成这种情况的原因是什么？

由于

Answer 1

上述方法对我不起作用。当我尝试构建项目时，找不到包引用，并显示以下错误消息。

我使用的是“ node_modules / bootstrap / dist / css / bootstrap.min.css”，而不是使用“ ../ node_modules / bootstrap / dist / css / bootstrap.min.css ” ”在 angular.json 中的包参考中。

Answer 2

当我关注我正在关注的教程中的笔记时，我写下了安装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]问题中。

希望这有助于其他人。

Answer 3

版本： Angular 6

cli：6.2.3（ng --version）

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/style.css"              
            ],

无法使用bootstrap

3 个答案: