无法以角度安装bootstrap

Question

我创建了一个新的角度项目，我想在那里安装bootstrap样式。所以我运行了以下命令：

>npm install --save bootstrap

但这是我收到的：

npm WARN [email protected] requires a peer of @angular/compiler@^2.3.1 || >=4.0.0-beta <
5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^2.3.1 || >=4.0.0-beta <5.0.
0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents)
:
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]:
wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 116 packages in 10.308s

我检查了node-modules文件夹，但是我没找到bootstrap文件夹。我检查了谷歌，我发现它可能是角度问题。我该如何解决这个问题？

我与你分享我的package.json文件，它可以帮助找到解决方案：

{
  "name": "source-project",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

Answer 1

要在角度中使用引导程序样式，请尝试从CDN中包含引导程序

<link rel="stylesheet"
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
 integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
 crossorigin="anonymous">

在相应的html文件的head标签或index.html本身（如果你想要完全可见性）。然后，您可以为您的html元素使用bootstrap类！

希望这可以帮助。

Answer 2

• npm install jquery --save
• npm install bootstrap --save
• 在.angular-cli.json文件中为jquery和bootstrap添加css和js文件

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

• 现在服务

Answer 3

Angular（当您使用Angular CLI时）向项目添加bootstrap的方法是将库（在您的情况下为css）添加到.angular-cli.json文件中。

如果你还需要js，请记住在你的scripts的.angular-cli.json中包含它。

如何完成此操作的示例，在您的样式数组下添加：

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

完整的剪辑可以在这里看到：

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

如果找不到引导程序文件夹，请尝试刷新工作区文件夹。如果这是您的编辑器，可以在VS Code中导航器中的圆形箭头上完成此操作。

希望这可以帮助。

亲切问候克里斯