Angular 4：ブートストラップを含めるには？

私はバックエンド開発者であり、Angular4をいじっています。そこで、次のインストールチュートリアルを行いました：https : //www.youtube.com/watch?v=cdlbFEsAGXo。

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

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。

ビデオを見るか、手順に従ってください

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

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

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

方法1

ブートストラップ、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の2つの追加のjavascriptパッケージが必要です。これらの2つのパッケージブートストラップがないと、Bootstrap 4はJqueryとpopper.jsパッケージを使用しているため、インストールする必要があります。

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

npm install jquery --save

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

npm install popper.js --save

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

angular.jsonを開きます。このファイルは、angularディレクトリで使用できます。そのファイルを開き、styles []およびscripts []パス内にブートストラップ、jquery、およびpopper.jsファイルのパスを追加します。以下の例を参照してください。

"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

npmを使用してブートストラップをインストールします。方法3の方法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>

ブートストラップが正常に動作するようになりました

ブートストラップを角度で構成/統合/使用するには、最初にnpmを使用してブートストラップパッケージをインストールする必要があります。

パッケージをインストールする

$ npm install bootstrap@4.0.0-alpha.6 --save   // for specific version
or
$ npm install bootstrap --save   // for latest version

注：--saveコマンドは、パッケージの依存関係をpackage.jsonファイル内に保存します。

上記の手順でパッケージをインストールしたので、以下のオプションのいずれかまたは両方を使用して、これらのスタイルをロードする必要があることをAngular CLIに伝えることができます。

オプション1）src / styles.cssファイルに追加する

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

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

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

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

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

Angular 4-ブートストラップ/ @ ng-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をインストールします。

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

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

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

この後、すべてのブートストラップウィジェット（カルーセル、モーダル、ポップオーバー、ツールチップ、タブなど）といくつかの追加機能（日付ピッカー、評価、タイムピッカー、タイプアヘッド）を使用できます。

でAngular4あなたが扱うよう@typesのシステム、あなたは、物事を次の手順を実行しなければなりません

行う、

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

tsconfig.json

タイプ配列を探し、jqueryとブートストラップエントリを追加します。

"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とブートストラップの両方を使い始めます。

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

npmをインストールします

npm install bootstrap --save

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

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

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

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

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

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

Bootstrap 3の場合：

npm install bootstrap --save

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

npm install bootstrap@next --save

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

注意： ローカルのCSSファイルをアセットフォルダの下に配置しないでください。Angular CLIを使用して本番環境ビルドを実行すると、.angular-cli.jsonで宣言されたCSSファイルが縮小され、すべてのスタイルが単一のstyles.cssにバンドルされます。アセットフォルダーはビルドプロセス中にdistフォルダーにコピーされます（CSSコードが複製されます）。ローカルCSSファイルは、index.htmlに直接インポートする場合にのみ、アセットの下に配置してください。

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をインストールせずにこれらのコンポーネントをどのように使用できますか？

NPMからもインストールできるngx-bootstrapと呼ばれるBootstrap用のAngularラッパーライブラリがあります。

npm install ngx-bootstrap --save

注意ng2-bootstrapとngx-bootstrapは同じパッケージであることに。ng2-bootstrapは#itsJustAngularの後でngx-bootstrapに名前が変更されました。

Angular CLIプロジェクトの作成時にBootstrapとngx-bootstrapを同時にインストールする場合：

npm install bootstrap ngx-bootstrap --save

4.1：app.module.tsに必要なBootstrapモジュールを追加する

ngx-bootstrapを実行して、app.module.tsに必要なモジュールを追加します。たとえば、Dropdown、Tooltip、およびModalコンポーネントを使用するとします。

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、Bootstrapモジュールをインポートし（forRoot（）を使用）、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にブートストラップモジュールをインポートすることを忘れないでください。

import 'AppBootstrapModule} from' ./app-bootstrap/app-bootstrap.module ';

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

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

これが誰かを助けることを願っています！

Angular 7.0.0でテスト済み

手順1-必要な依存関係をインストールする

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

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

npmインストールjquery

私が試したバージョン：

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

手順2：angular.jsonでライブラリを以下の順序で指定します。最新のangularでは、構成ファイル名はangular.jsonで、angular-cli.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"
            ]
          },

以下のためのブートストラップ 4.0.0-alph.6

npm install bootstrap@4.0.0-alpha.6 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"
  ]

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

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

角度でjqueryを使用しないことがベストプラクティスです。ブートストラップを使用せずにブートストラップをインストールするには、https：//github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.mdメソッドを使用します。 jqueryに依存するjsコンポーネント。

npm install ngx-bootstrap bootstrap --save

or

ng add ngx-bootstrap   (Preferred)

Angularでコードjqueryを自由に保つ

プロジェクトで次のコマンドを実行します。つまり、 npm install bootstrap@4.0.0-alpha.5 --save

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

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

次のインポートをapp.module import {NgbModule} from '@ ng-bootstrap / ng-bootstrap'に追加します。インポートにNgbModuleを追加します

stye.css @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

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

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

ステップ3： ng serve

angular-cli.jsonに追加

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

それは仕事になるでしょう、私はそれをチェックしました。

オンラインでブートストラップを使用し、アプリケーションがインターネットにアクセスできる場合は、追加できます

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

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

リファレンス：angular.io

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

Angular 6 CLI、ただ実行：

ng add @ ng-bootstrap / schematics 

最新をインストールするには$ npm i --save bootstrap @ nextを使用します

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

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

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

| * | Angular 2、4、5、6 +用のBootstrap 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"
    ]
    ...
}]

あなたが上にある場合はアンギュラ6+使用するには、以下を追加しますangular.json：

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

Angularに現在のバージョン4のブートストラップを追加する：

1 /最初にそれらをインストールする必要があります：

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save

2 /次に、angular.jsonのスクリプトに必要なスクリプトファイルを追加します。

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
],
enter code here

3 /最後に、Boangstrap CSSをangular.jsonのスタイル配列に追加します。

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

このリンクをチェック

あなたはブートストラップとjqueryのためにcdnで作業するか、アプリでbootstarpを直接インストールします：

npm install ngx-bootstrap --save

https://ng-bootstrap.github.io/#/homeも使用しますが、これは適切ではありません

https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a