web-dev-qa-db-ja.com

Angular 4：ブートストラップを含める方法

私はバックエンドの開発者で、Angular 4で遊んでいます。だから私はこのインストールチュートリアルをやった： https://www.youtube.com/watch?v=cdlbFEsAGXo 。

これを考えて、クラス「container-fluid」または「col-md-6」とそのようなものを使用できるように、どのようにしてアプリにブートストラップを追加できますか？

twitter-bootstrapangular
90
Joschi

これがますます多くの答えを得るにつれて、私は私を助けたものをマークするつもりです：

Angular-cliプロジェクトにブートストラップを追加する方法

5
Joschi
npm install --save bootstrap

その後、angular-cli.jsonの中（プロジェクトのルートフォルダーの中）でstylesを見つけて、次のようにブートストラップのcssファイルを追加します。

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

更新：
角度6+ angular-cli.json変更されたからangular.jsonへ。

147
Egor Stambakio

ビデオを見る、または手順に従う

ブートストラップ4を角度2 /角度4 /角度5 /角度6に取り付けます

プロジェクトにブートストラップを含める方法は3つあります。
1）index.htmlファイルにCDNリンクを追加する
2）npmを使用してブートストラップをインストールし、angular.json推奨にパスを設定します。
3）npmを使用してブートストラップをインストールし、index.htmlファイルにパスを設定します。

プロジェクトディレクトリにインストールされているので簡単にアクセスできるので、npmを使用してブートストラップをインストールする2つの方法に従うことをお勧めします。

方法1

Bootstrap、Jquery、およびpopper.js CDNパスを角プロジェクトのindex.htmlファイルに追加します。

Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css "
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js "
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js

方法2

1）npmを使ってブートストラップをインストールする

npm install bootstrap --save

bootstrap 4はJqueryとpopper.jsパッケージを使用しているため、Bootstrap 4をインストールした後は、JqueryとPopper.jsの2つのパッケージが必要になります。

2）JQUERYをインストールする

npm install jquery --save

3）Popper.jsをインストールする

npm install popper.js --save

これで、ブートストラップはnode_modulesフォルダ内のプロジェクトディレクトリにインストールされました。

open angular.jsonこのファイルはあなたが利用できますangleディレクトリを開き、styles []とscripts）の中にbootstrap、jquery、そしてpopper.jsファイルのパスを追加[] path以下の例を参照してください

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

注： jsファイルのシーケンスを変更しないでください。

方法3

方法3ではnpm follow 方法2を使用してブートストラップをインストールします。angular.jsonファイルの代わりにindex.htmlファイル内のパスを設定するだけです。

bootstrap.css

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css">

Jquery.js

<script src="node_modules/jquery/dist/jquery.min.js"><br>

Bootstrap.js

<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>

Popper.js

<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>

今すぐブートストラップ正常に動作しています

74
Mohammad Faisal

Bootstrap依存関係を設定するためには、npmを使ってBootstrap依存関係をインストールする必要があります。

$ npm install [email protected] --save

注：--saveコマンドを実行すると、package.jsonファイル内のAngularアプリの依存関係が保存されます。

依存関係が整ったので、Angular CLIに、以下のオプションのいずれかまたは両方を使用してこれらのスタイルを読み込む必要があることを伝えることができます。

オプション1）ファイルsrc/styles.cssへの追加

以下に示すように依存関係を追加することができます。

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

オプション2）angular-cli.jsonまたはangular.jsonへの追加

以下に示すように、Angularアプリケーションのルートフォルダにあるangular-cli.jsonまたはangular.jsonファイルにスタイルcssファイルを追加できます。

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

Angular 4 - ブートストラップ/ @ ng-bootstrapセットアップ

以下のコマンドを使用して、最初に bootstrap をプロジェクトにインストールします。

npm install --save bootstrap

次に、この行"../node_modules/bootstrap/dist/css/bootstrap.min.css"をスタイルのangular-cli.jsonファイル（ルートフォルダー）に追加します。

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

上記の依存関係をインストールした後、 ng-bootstrap viaを介してインストールします。

npm install --save @ng-bootstrap/ng-bootstrap

インストールしたら、メインモジュールをインポートする必要があります。

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

この後は、すべてのブートストラップウィジェット（例：カルーセル、モーダル、ポップオーバー、ツールチップ、タブなど）とその他の便利な機能（日付ピッカー、評価、タイムピッカー、先行入力）を使用できます。

12
Hidayt Rahman

Angular4 で @types systemを扱うときは、次のことをしてください。

行う、

1) npm install --save @types/jquery
2) npm install --save @types/bootstrap

tsconfig.json

types arrayを探し、 jquery および bootstrap entriesを追加します。

"types": [
      "jquery",
      "bootstrap",  
      "node"
]

Index.html

見出しセクションに以下のエントリを追加します。

  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="node_modules/jquery/dist/jquery.min.js "></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>

そして jquery と bootstrap bothの使用を開始してください。

9
micronyks

このリンクを参照してください https://github.com/angular/angular-cli/wiki/stories-include-bootstrap 。

それはangular-cliを使用してあなたのAngular 4に最新のブートストラップを含めることについてステップバイステップのインストラクションを提供します。

5
mani R

以下の詳細な手順と作業例については、 https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/ にアクセスしてください。

適切な説明と非常に詳細な手順。

ステップ： NPMからのブートストラップのインストール

次に、Bootstrapをインストールする必要があります。作成したプロジェクトにディレクトリを変更し（cd angular-bootstrap-example）、次のコマンドを実行します。

ブートストラップ3の場合

npm install bootstrap --save

Bootstrap 4（現在ベータ版）の場合：

npm install bootstrap@next --save

_または_ 代替案：ローカルブートストラップCSS 代替案として、ブートストラップCSSをダウンロードしてプロジェクトにローカルに追加することもできます。私はWebサイトからBootstrapをダウンロードし、フォルダスタイル（styles.cssと同じレベル）を作成しました。

注意： ローカルのCSSファイルをassetsフォルダに置かないでください。 Angular CLIを使用してプロダクションビルドを行うと、.angular-cli.jsonで宣言されているCSSファイルが縮小され、すべてのスタイルが単一のstyles.cssにまとめられます。 assetフォルダーは、ビルドプロセス中にdistフォルダーにコピーされます（CSSコードは複製されます）。あなたがそれらをindex.htmlに直接インポートしている場合に備えて、あなたのローカルCSSファイルを資産の下に置くだけです。

CSSのインポート 1. NPMからインストールされたBootstrapからCSSをインポートする方法は2つあります。

強力なテキスト 1：.angular-cli.jsonを設定します。

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

2：src/style.cssまたはsrc/style.scssに直接インポートします。 

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

私は個人的には、.angular-cli.jsonで既に宣言されているので、すべての私のスタイルをsrc/style.cssにインポートすることを好みます。

3.1代替方法：ローカルブートストラップCSS ブートストラップCSSファイルをローカルに追加した場合は、.angular-cli.jsonにインポートします。

"styles": [
  "styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
  "styles.scss"
],

または src/style.css

@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';

4：ngx-bootstrapを使用したJavaScriptコンポーネントのブートストラップ（オプション1） Bootstrap JavaScriptコンポーネント（JQueryが必要）を使用する必要がない場合は、これですべての設定が完了します。しかし、モーダル、アコーディオン、日付ピッカー、ツールチップ、その他のコンポーネントを使用する必要がある場合、jQueryをインストールせずにこれらのコンポーネントを使用する方法はありますか？

ブートストラップ用のngx-bootstrapというAngularラッパーライブラリがあります。これもNPMからインストールできます。

npm install ngx-bootstrap --save

注 ng2-bootstrapとngx-bootstrapは同じパッケージです。 #it​​sJustAngularの後、ng2-bootstrapはngx-bootstrapに改名されました。

Angular CLIプロジェクトを作成するときにBootstrapとngx-bootstrapを同時にインストールする場合は、次のようにします。

npm install bootstrap ngx-bootstrap --save

4.1：app.module.tsに必要なブートストラップモジュールを追加する

Ngx-bootstrapに目を通し、app.module.tsに必要なモジュールを追加してください。たとえば、ドロップダウン、ツールチップ、モーダルの各コンポーネントを使用するとします。

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    BrowserModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  // ...
})
export class AppBootstrapModule {}

モジュールごとに.forRoot（）メソッドを呼び出すので（ngx-bootstrapモジュールプロバイダによる）、機能はプロジェクトのすべてのコンポーネントおよびモジュールで利用可能になります（グローバルスコープ）。

別の方法として、ngx-bootstrapを別のモジュールにまとめる場合（多くのbsモジュールをインポートする必要があり、app.moduleを乱雑にしたくない場合のために、編成目的で）、モジュールを作成することができます。 app-bootstrap.module.ts、（forRoot（）を使用して）Bootstrapモジュールをインポートし、それらをexportsセクションで宣言します（そのため他のモジュールでも使用可能になります）。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    CommonModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}

最後に、app.module.tsにブートストラップモジュールをインポートすることを忘れないでください。

'./app-bootstrap/app-bootstrap.module'から{AppBootstrapModule}をインポートしてください。

@NgModule({
  imports: [BrowserModule, AppBootstrapModule],
  // ...
})
export class AppModule {}

ngx-bootstrapはBootstrap 3と4で動作します。また、いくつかのテストを行い、ほとんどの機能もBootstrap 2.xで動作します（はい、まだ維持するためのいくつかのレガシーコードがあります）。

これが誰かに役立つことを願っています！

4
surekha shelake

Sass/Scssを使用している場合は、これに従ってください。

Npmインストールをします

npm install bootstrap --save

sass/scssファイルにimportステートメントを追加します。

@import '~bootstrap/dist/css/bootstrap.css'
4
Mohammed Safeer

ブートストラップ 4.0.0-alph.6

npm install [email protected] jquery tether --save

その後、これが実行された後に実行します。

npm install

今すぐ .angular-cli.json ファイルを開き、ブートストラップ、jquery、およびテザーをインポートします。

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

そしていま。あなたは行く準備ができています。

3
Budi Salah

テスト済みAngular 7.0.0

ステップ1 - 必要な依存関係をインストールする

npm install bootstrap（特定のバージョンが必要な場合は、バージョン番号を指定してください。）

npm install popper.js（特定のバージョンが必要な場合は、バージョン番号を指定してください。）

npm install jquery

私が試したバージョン：

"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",

ステップ2：以下の順番でライブラリをangle.jsonで指定します。最近のAngularでは、設定ファイル名はangular-cli.jsonではなくangular.jsonです。

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "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/css/bootstrap.css",
              "src/styles.scss"
            ],
            "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"
            ]
          },
2
Code-EZ

プロジェクトで次のコマンドを実行します。 npm install [email protected] --save

上記の依存関係をインストールした後、ブートストラップモジュールをインストールする次のnpmコマンドを実行します。 npm install --save @ ng-bootstrap/ng-bootstrap

参照のためにこれをチェックしてください - https://github.com/ng-bootstrap/ng-bootstrap

次のインポートを '@ ng-bootstrap/ng-bootstrap'からapp.module import {NgbModule}に追加してください。インポートにNgbModuleを追加します。

あなたのstye.cssの@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

1
Jinesh

私が見ることができるように、あなたはすでに多くの答えを得ましたが、あなたはこの方法を試すことができます。

角度でjqueryを使用しないことのベストプラクティス、私は好む https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md jqueryに依存するbootstrap jsコンポーネントを使用せずにbootstrapをインストールする方法。

npm install ngx-bootstrap bootstrap --save

or

ng add ngx-bootstrap   (Preferred)

角度であなたのコードjqueryを自由に保つ

1
Rakesh Roy

ステップ1： npm install bootstrap --save

ステップ：2： angular.jsonのnode_modules/bootstrap/dist/css/bootstrap.min.cssにコードを下に貼り付け

ステップ3： ng serve

enter image description here

1
Abdullah Pariyani

Angular 6 CLIは、次のようにします。

ng add @ ng-bootstrap/schematics

0
Brian

あなたがオンラインでブートストラップを使いたい、そしてあなたのアプリケーションがインターネットへのアクセスを持っているなら、あなたは追加することができます

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

メインのstyle.cssファイルに入ります。そしてその最も簡単な方法です。

参照： angular.io

注意。このソリューションは、unpkg Webサイトからブートストラップをロードし、インターネットにアクセスできるようにする必要があります。

0
Arash

最初にプロジェクトにブートストラップをインストールした後、npm npm i bootstrapを使用してプロジェクト内に開いたur style.cssファイルを追加し、次の行を追加します。

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

それがあなたのプロジェクトに追加されたブートストラップです

0
AAshish jha

| * | Angular 2、4、5、6 +用のブートストラップ4のインストール：

| +> npmでブートストラップをインストールする

npm install bootstrap --save

npm install popper.js --save

| +> angular.jsonにスタイルとスクリプトを追加する

"architect": [{
    ...
    "styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.scss"
    ],
    "scripts": [
        "node_modules/jquery/dist/jquery.js",
        "node_modules/popper.js/dist/umd/popper.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
    ...
}]
0
Sujay U N

最新のものをインストールするには$ npm i --save bootstrap @ nextを使います。

0
diayn geogiev

angular-cli.jsonに追加する

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

それは仕事になります、私はそれをチェックしました。

0
aimprogman