web-dev-qa-db-ja.com

Angular 6 with bootstrap 4.1 not loading

Angular.jsonファイルを介してロードするbootstrapを取得できないようです

この問題と同様に、何もbootstrap relatedはロードされません。しかし、ng buildとng serveは問題を報告していないようです。それだけでページを参照しました。スタイリングされています。
Bootstrap 4.1.1 NavbarがAngular 6 で機能しない

[note] [email protected]へのロールバックは問題なく動作するようです

package.json

{
  "name": "client-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "bootstrap": "^4.1.1",
    "core-js": "^2.5.4",
    "jquery": "^3.3.1",
    "popper": "^1.0.1",
    "popper.js": "^1.14.3",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "TypeScript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }

angular.json "

styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/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"
        ]
angularbootstrap-4
5
bitshift

以前にこの問題に直面し、解決策は@import '../node_modules/bootstrap/dist/css/bootstrap.css'を作成することです。コードの先頭にあるstyle.cssファイル内。 bootstrapは正常にロードされます

14
Menna Ramadan

Angular 7プロジェクトに追加しました。手順は次のとおりです。

1-インストールbootstrap 4：

npm install bootstrap

2-以下のインポートをsrc\styles.cssに追加します

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

bootstrapが 'ng serve'を使用してアプリをレンダリングした後に更新/インストールされた場合は、プロセスを終了してアプリを再コンパイルします。

1
Gayatri Kulkarni

私はstyles.cssを編集することを提案します：

@import "~ bootstrap/dist/css/bootstrap.css";

より良い解決策が非常にシンプルで効果的であれば

1
mahmoud nassih

Bootstrap.cssのインポートはプロセスの複製であるため、まったく不要です。 bootstrap-時々構成がbootstrap 3-そして、最新バージョンをnpm install bootstrap私の問題を解決します。

0
yunusH

@import '〜bootstrap/dist/css/bootstrap.css'は使用しないでください。

以下の@import 'bootstrap/dist/css/bootstrap.css'を使用して解決しました。 styles.css

0
Raj Kumar Mishra