angular - 无法以 Angular 安装 Bootstrap

标签 angular twitter-bootstrap

我创建了一个新的 Angular 项目,我想在那里安装 Bootstrap 样式。所以我运行了以下命令:

>npm install --save bootstrap

但这就是我收到的:

npm WARN codelyzer@3.2.2 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 codelyzer@3.2.2 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: fsevents@1.1.3 (node_modules\fsevents)
:
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3:
wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ bootstrap@3.3.7
added 116 packages in 10.308s

我检查了节点模块文件夹,但没有找到 Bootstrap 文件夹。我查了一下谷歌,发现这可能是 Angular 问题。我该如何解决这个问题?

我与您分享我的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"
  }
}

最佳答案

  • 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"
    ]
    
  • 现在开始服务

关于angular - 无法以 Angular 安装 Bootstrap ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48076392/

相关文章:

html - 如何防止div消失?

html - 选择后无法接收 Angular 2 函数中的选项值

angular - Qt QWebEngine 远程调试 : Chrome developer tools no longer work

Angular4 karma 代理通配符

css - Bootstrap - 对齐导航栏的品牌标志和选项菜单(图标+文本)

css - Bootstrap 导航栏

node.js - Git Bash-Gulp : Can't execute command "gulp"; Error: Cannot find module

angular - 即使安装了 Yarn 也找不到模块 'yarn'

Angular 6+ 如何更改默认端口 4200

css - 将空网格空间添加到 bootstrap 3