web-dev-qa-db-ja.com

Bootstrapが正しく機能しないAngular 6

私はAngularを学び始め、チュートリアルをフォローしています。ナビゲーションバーのチュートリアルのようにコードを配置してみました：

<nav class="navbar navbar-default">
  <div class="container-fluid">
     <div class="navbar-header">
         <a href="#" class="navbar-brand">Recipe book</a>
     </div>
     <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
             <li> <a href="#">Recipe</a></li>
             <li> <a href="#">Shopping list</a></li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                  <ul class="dropdown-menu">
                      <li><a href="#">Save data </a></li>
                      <li><a href="#">Fetch data </a></li>
                  </ul>
              </li>
         </ul>
     </div>
  </div>
</nav>

しかし、私が得るすべてはこれです：

enter image description here

ブートストラップを外すと、他のアイテムが手に入ります。

ブートストラップを使用するには、styles.cssでnpm install bootstrap --saveと@import "~bootstrap/dist/css/bootstrap.css";を使用しました。

編集：

私は2つの問題を含む質問を開きたくありませんでしたが、これまでの回答を調べた後、私が抱えていた別の問題について説明することはできません。

また、nmp install jquery --saveを使用してJqueryをインストールし、angular.jsonに追加しました。

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

この場合、@import "~bootstrap/dist/css/bootstrap.css";をstyles.css`から削除した後、bootstrapはまったく機能しません。bootstrap=を機能させる唯一の方法質問で説明したとおりです。

編集2：

私は新しいプロジェクトを開始し、@ HDJEMAIの回答の指示に従いました。今でも画像と同じページが表示されますが、そのページは、angular.jsonのスタイルとスクリプトに追加された行を介して機能し、styles.cssファイルの@import "~bootstrap/dist/css/bootstrap.css"を介して機能しません。しかし、コードは同じですが、問題はチュートリアルと同じではありません。

これは彼がチュートリアルで得るものです： enter image description here

cssangularbootstrap-4angular6
11
ATT

bootstrapとJQueryの両方をインストールする必要があります：

npm install bootstrap jquery --save

次に、これらのファイルがノードモジュールフォルダーにあります。

node_modules/jquery/dist/jquery.min.js
node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/js/bootstrap.min.js

次に、angular.jsonファイルを更新する必要があります。

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

jquery.min.jsスクリプトを追加しない場合、Bootstrapは機能しません。

別の要件は、popper.js必要な場合Bootstrap dropdown次に、それをインストールし、スクリプトファイルも追加する必要があります

npm install popper.js

次に、このスクリプトも追加します

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

ブートストラップドロップダウンにはPopper.js（https://popper.js.org）が必要

21
HDJEMAI

親愛なる友人iamが同じangular6チュートリアルを勉強しています。私も同じ状況に直面しました。最後に、これを解決しました。最初のアンインストールブートストラップ。次のステップは、次のコマンドでbootstrapをインストールすることです

npm install --save bootstrap@3 A

次に、styles.cssに移動して貼り付けます

@import "node_modules/bootstrap/dist/css/bootstrap.css"

アプリケーションは間違いなくudemyのビデオチュートリアルとまったく同じように動作します

6
baiju krishnan

bootstrapパスをangular.jsonファイルに追加する場合は、project\architect\build内のstylesであることを確認してください。project\architect\testにあるものではありません。

{
"projects": {
        "architect": {
            "build": {
                    "styles": [
                        "node_modules/bootstrap/dist/bootstrap.min.css",
                         "src/styles.css"
                    ],
            "test": {
                    "styles": [
                         "src/styles.css"
                    ],
3
Mann Wong

この3つのリンクをindex.htmlファイルに追加します。 bootstrapまたはjqueryをインストールしたり、angular.jsonファイルを更新したりする必要はありません。チャームとして機能します。

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
2
Salman Arefin

同じ問題がありました。以下は私のために役立ちました。

サーバーを停止し、ng serveを使用して再コンパイルします

2
Utkarsh Bhushan

bootstrapをインストールしてangular.jsonファイルに追加した後。

bootstrapが表示されない場合は、開発URLのポートを変更してください：

ng serve --port <your choice of port>
1
Charles

いろいろチェックする

"../"...または"./"...または/また、「js」ファイルまたは「js」ファイルに依存する「css」ファイルをこの理由で追加したいので、「style.css」で使用したくないので、最善の方法は

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

しかし、ブラウザやIDEだけでなくPCを再起動します

0
sunny
install npm install bootstrap@latest jquery --save
install npm install popper.js;

次に、Angular.jsonファイル（行番号47）に移動して、次の行を変更します。

"styles": [
    "src/styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "./node_modules/jquery/dist/jquery.min.js",
    "./node_modules/popper.js/dist/popper.js",
    "./node_modules/bootstrap/dist/js/bootstrap.min.js"
],
0
Shakti Srivastav

bootstrapが機能するには、jQueryとpopperを追加する必要があります。

NPMを使用してブートストラップ、jQuery、ポッパーをインストールする

1）インストールbootstrap npm install bootstrap --save

2）jQueryをインストールしますnpm install jquery --save

3）Popperをインストールしますnpm install popper.js --save

4）それぞれのファイルがnode_modulesフォルダーにインストールされているかどうかを確認します。5）angular.jsonファイルで、インストールされているファイルのパスを以下と同じ順序で指定します。

"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"
            ]

5）ng serveをもう一度実行します。Bootstrapが動作するはずです!!

0
Nithin Samuel

上記の回答とまったく同じことをしましたが、同じ問題に直面しました。私の場合、angular.jsonで間違ったpopper.jsパスを参照していました

"node_modules/popper.js/dist/js/popper.js",

の代わりに

"node_modules/popper.js/dist/umd/js/popper.js",
0
Manish Lall Amarnani

ブートストラップの問題が原因だと思います。これを試してください：

ステップ1。.angular-cli.jsonファイル内

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

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

ステップ2。styles.cssに移動します

インポートbootstrapこの行を追加して

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

これらの手順により、ビルドプロセス中に発生したエラーが解決されました。

0
Usman Shabbir

私が見ているように、UDEMYの「MaximilianSchwarzmüller」コースをフォローしている場合は、Bootstrap 3、他に何もインストールしていないことを確認してください。プロジェクトフォルダでこれらのコマンドを使用します（他の場合のみアンインストールします）バージョンがインストールされています）。

npm uninstall --save bootstrap
npm install --save bootstrap@3

これにより、プロジェクトのローカルにインストールされます。

私はBootstrap4をインストールし（コースは3ではなく4でも機能すると考えます）、Bootstrap3を使用すると、コースと同じこのプロジェクトで機能しました（ポッパーとjQueryなし）。

0
Xodblux

Angular.jsonを追加する

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "xtreme-admin-angular": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {},
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/xtreme-admin-angular",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "node_modules/bootstrap/dist/bootstrap.min.css"
                             //Your root depend this path
                        ]

プロジェクトを再実行します

0
Jai Kumaresh

ブートストラップからJavaScript部分とフォントが欠落しています。これが、ナビゲーションバーの折りたたまれた部分が表示されない理由です。 BootstrapはjQueryを使用するため、angularではあまり機能しません。

BootstrapとAngularはすでに別のプロジェクトに統合されています。これを使用してみてください： https://angular-ui.github.io/bootstrap/

0
mbuechmann

多くのことに疲れましたが、これは今日私にとってうまくいきました：

package.json

  "dependencies": {
    "@angular/animations": "~8.2.5",
    "@angular/common": "~8.2.5",
    "@angular/compiler": "~8.2.5",
    "@angular/core": "~8.2.5",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.2.5",
    "@angular/platform-browser": "~8.2.5",
    "@angular/platform-browser-dynamic": "~8.2.5",
    "@angular/router": "~8.2.5",
    "bootstrap": "^4.3.1",
    "bootstrap-sass": "^3.3.7",
    "firebase": "^6.6.0",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "node-sass": "^4.11.0",
    "popper.js": "^1.15.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  }

angular.json

            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
0
IronWorkshop

上記の方法は問題ありませんが、すべてを正しく実行している場合でも、うまく機能しない場合があります。私は個人的にcss/jsを手動でダウンロードしてそれらをアセットフォルダーに保存し、index.htmlにリンクを提供することを好みます。何かがうまくいかない場合、ブラウザコンソールが問題を教えてくれますが、従来のアプローチでは、ブラウザコンソールは情報/エラーを提供しません。

0
Pushkar Shrivastava