私たちは、angular-cli 1.0.0-beta.5（w / node v6.1.0）で生成されたアプリでブートストラップ4（4.0.0-alpha.2）を使用したいと思います。

npmでブートストラップとその依存関係を取得した後、最初のアプローチはそれらをangular-cli-build.js次の場所に追加することでした。

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

にインポートします index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

これは問題ng serveなく動作しましたが、-prodフラグ付きのビルドを作成するとすぐに、これらの依存関係はすべてなくなりましたdist/vendor（驚き！）。

angular-cliで生成されたプロジェクトでこのようなシナリオ（つまり、ブートストラップスクリプトの読み込み）をどのように処理することを意図していますか？

次のような考えがありましたが、どちらに進むべきか本当にわかりません...

• CDNを使用しますか？しかし、これらのファイルが利用可能になることを保証するために、むしろこれらのファイルを提供します

• 依存関係をdist/vendor私たちの後にコピーしますng build -prodか？しかし、ビルド部分を「処理する」ので、angular-cliが提供するもののように思えますか？

• jquery、ブートストラップ、テザーを追加しsrc/system-config.ts、どういうわけかそれらをバンドルに追加しmain.tsますか？しかし、アプリケーションのコードでそれらを明示的に使用しないことを考えると、それは間違っているように見えました（たとえば、moment.jsやlodashのようなものとは異なります）。

重要UPDATE： NG2-ブートストラップは、今では置き換えられNGX-ブートストラップ

ngx-bootstrapは、Angular 3と4の両方をサポートしています。

更新： 1.0.0-beta.11-webpack以降のバージョン

最初に、ターミナルで次のコマンドを使用して自分のangular-cliバージョンを確認します。

ng -v

あなたの場合は、角度-cliのバージョンがより大きい1.0.0-beta.11-のWebPACK、その後、次の手順を実行する必要があります。

1. ngx-bootstrapおよびbootstrapをインストールします。

   npm install ngx-bootstrap bootstrap --save

この行は、最近Bootstrap 3をインストールしますが、将来的にBootstrap 4をインストールすることもできます。ngx-bootstrapは両方のバージョンをサポートしていることに注意してください。

2. オープンはsrc /アプリ/ app.module.tsと追加します。

   import { AlertModule } from 'ngx-bootstrap';
   ...
   @NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
   ... 
   })

3. オープンアンギュラcli.json（angular6およびそれ以降のファイル名に変更にangular.json）とに新しいエントリを挿入styles配列を：

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

4. オープンはsrc /アプリ/ app.component.htmlと追加します。

   <alert type="success">hello</alert>

1.0.0-beta.10以下のバージョン：

そして、あなたのangular-cliバージョンが 1.0.0-beta.10である場合以下の場合、以下の手順を使用できます。

まず、プロジェクトディレクトリに移動して次のように入力します。

npm install ngx-bootstrap --save

次に、angular-cli-build.jsを開き、次の行を追加します。

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

次に、src / system-config.tsを開いて、次のように記述します。

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...そして：

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

キーワードを探す> https://github.com/angular/angular-cliでのグローバルライブラリのインストールは、答えを見つけるのに役立ちます。

彼らのドキュメントに従って、Bootstrapライブラリを追加するには、次の手順を実行できます。

最初にnpmからBootstrapをインストールします。

npm install bootstrap@next

次に、必要なスクリプトファイルをangular-cli.jsonファイルのapps [0] .scriptsに追加します。

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

最後に、bootstrap CSSをapps [0] .styles配列に追加します。

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

ng serveを実行している場合は再起動し、Bootstrap 4がアプリで動作するはずです。

これが最良の解決策です。ただし、ng serveを再起動しないと機能しません。この最後のアクションを実行することを強くお勧めします。

以下をせよ：

npm i bootstrap@next --save

これにより、プロジェクトにブートストラップ4が追加されます。

次にsrc/style.scssor src/style.cssファイルに移動し（使用しているものを選択）、そこにブートストラップをインポートします。

style.cssの場合

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

style.scssの場合

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

スクリプトの場合も、ファイルを次のようにangular-cli.jsonファイルに追加する必要があります（Angularバージョン6では、この編集はangular.jsonファイルで行う必要があります）。

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

最初に、これらのコマンドでテザー、jquery、ブートストラップをインストールする必要があります

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

これらの行をangular-cli.json（バージョン6以降のangular.json）ファイルに追加した後

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

Bootstrapを含める方法に関する公式（angular-cliチーム）の話はまだ誰も言及していないため：https : //github.com/angular/angular-cli/wiki/stories-include-bootstrap

ブートストラップを含める

ブートストラップは、Angularプロジェクト内で使用できる人気のあるCSSフレームワークです。このガイドでは、Angular CLIプロジェクトにブートストラップを追加し、ブートストラップを使用するように構成する方法について説明します。

CSSの使用

入門

新しいプロジェクトを作成し、プロジェクトに移動します

ng new my-app
cd my-app

ブートストラップのインストール

新しいプロジェクトを作成して準備ができたら、次に依存関係としてプロジェクトにブートストラップをインストールする必要があります。--saveオプションを使用すると、依存関係がpackage.jsonに保存されます

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

プロジェクトの構成

これでプロジェクトが設定されたので、ブートストラップCSSを含めるように構成する必要があります。

• .angular-cli.jsonプロジェクトのルートからファイルを開きます。
• プロパティappsの下で、その配列の最初の項目がデフォルトのアプリケーションです。
• styles外部グローバルスタイルをアプリケーションに適用できるようにするプロパティがあります。
• へのパスを指定します bootstrap.min.css

完了すると、次のようになります。

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

注：変更を加えた.angular-cli.json場合は、再起動ng serveして構成の変更を反映する必要があります。

テストプロジェクト

app.component.html次のマークアップを開いて追加します。

<button class="btn btn-primary">Test Button</button>

アプリケーションを構成しng serveたら、実行してアプリケーションを開発モードで実行します。ブラウザでアプリケーションに移動しますlocalhost:4200。ブートストラップスタイルのボタンが表示されることを確認します。

SASSの使用

入門

新しいプロジェクトを作成し、プロジェクトに移動します

ng new my-app --style=scss
cd my-app

ブートストラップのインストール

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

プロジェクトの構成

で空のファイル_variables.scssを作成しますsrc/。

を使用している場合はbootstrap-sass、以下をに追加します_variables.scss。

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

ではstyles.scss、以下を追加します。

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

テストプロジェクト

app.component.html次のマークアップを開いて追加します。

<button class="btn btn-primary">Test Button</button>

アプリケーションを構成しng serveたら、実行してアプリケーションを開発モードで実行します。ブラウザでアプリケーションに移動しますlocalhost:4200。ブートストラップスタイルのボタンが表示されることを確認します。変数が使用されていることを確認するには_variables.scss、以下を開いて追加します。

$brand-primary: red;

ブラウザに戻って、フォントの色が変更されていることを確認します。

アップデートv1.0.0-beta.26

ブートストラップをインポートする新しい方法については、こちらのドキュメントをご覧ください。

それでも機能しない場合は、ng serveコマンドで再起動します

1.0.0以前のバージョン：

index.htmlファイルでは、ブートストラップcssリンクが必要です（jsスクリプトは必要ありません）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

そして

npm install ng2-bootstrap --save
npm install moment --save

ng2-bootstrapをmy_project / src / system-config.tsにインストールした後 ：

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

そしてmy_project / angular-cli-build.jsで：

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

モジュールをベンダーに置くためにこのコマンドを忘れないでください：

ng build

同じ原理である別のモジュールからインポートする。

上記の方法はリリース後に変更されたと思います、このリンクをチェックしてください

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

プロジェクトを開始する

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

ng-bootstrapとbootstrapをインストールする

npm install ng2-bootstrap bootstrap --save

src / app / app.module.tsを開いて追加

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

angular-cli.jsonを開き、styles配列に新しいエントリを挿入します

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

src / app / app.component.htmlを開き、追加してすべての作品をテストします

<alert type="success">hello</alert>

Angular 5のBootstrap 4の手順

1. Angular 5プロジェクトを作成する

   ng new AngularBootstrapTest

2. プロジェクトディレクトリに移動

   cd AngularBootstrapTest

3. ブートストラップをダウンロード

   npmインストールブートストラップ

4. プロジェクトにブートストラップを追加

   4.1 .angular-cli.jsonを開く

   4.2 jsonの「styles」セクションを見つける

   4.3ブートストラップのCSSパスを以下のように追加します

   。

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

これで、angular 5プロジェクトにブートストラップCSSが正常に追加されました

テストブートストラップ

5. 開いた src/app/app.component.html
6. ブートストラップボタンコンポーネントを追加する

。

<button type="button" class="btn btn-primary">Primary</button>

ここでボタンのスタイルを参照できます（https://getbootstrap.com/docs/4.0/components/buttons/）

7. ファイルを保存する

8. プロジェクトを実行する

   ng serve --open

これで、ページにブートストラップスタイルのボタンが表示されます

注：ng serveの後にブートストラップパスを追加した場合、変更を反映するには、ng serveを停止して再実行する必要があります

これは非常に混乱し、ここでの答えは完全に混同されているので、私はBS4リポジトリの公式ui-teamを使用することをお勧めします（そう、NG-Bootstrapのリポジトリは非常にたくさんあります）。

こちらのhttps://github.com/ng-bootstrap/ng-bootstrapの手順に従って、BS4を入手してください。

libからの引用：

このライブラリは、ui-bootstrapチームによってゼロから構築されています。TypeScriptを使用しており、Bootstrap 4 CSSフレームワークをターゲットにしています。

Bootstrap 4と同様に、このライブラリは進行中の作業です。問題のリストをチェックして、実装しているすべてのことを確認してください。そこで自由にコメントしてください。

そこにあるものをコピーして貼り付けるだけです：

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

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

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

残りの部分は、インポートされたモジュールをアプリケーションモジュールにリストすることです。正確なメソッドは、ルート（トップレベル）モジュールとは少し異なり、最終的には（NgbModule.forRoot（）に類似した）コードが必要になります。

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

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

アプリケーションの他のモジュールは単にNgbModuleをインポートできます：

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

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

これはこれまでで最も一貫した動作のようです

1. ブートストラップをインストールする

   npm install bootstrap@next

2. .angular-cli.jsonにコードを追加します。

   "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. 最後に、bootstrap.cssをコードstyle.scssに追加します。

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

4. ローカルサーバーを再起動します

次の手順を実行します。

1. npm install --save bootstrap

2. そして.angular-cli.jsonで、スタイルセクションに追加します。

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

その後、ngサーバーを再起動する必要があります

楽しい

1. npmを使用してBootstrapをインストールする

   npm install bootstrap

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

npm install --save popper.js

3.Gotoのangular.json角6プロジェクト/中.angular-cli.json角度5における上場を追加します。

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

        "scripts": [
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

これを試して

npm install bootstrap@next

https://github.com/angular/angular-cli#global-library-installation

また、Angular-Cliで生成されたプロジェクトにブートストラップを追加する方法についての役立つ情報を提供しているMike Brocchiによるこのビデオを見ることができます。 https://www.youtube.com/watch?v=obbdFFbjLIU（約13:00）

1. bashで実行する npm install ng2-bootstrap bootstrap --save
2. 以下を追加/変更 angular-cli.json
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

それぞれのプロジェクトディレクトリでターミナル/コマンドプロンプトを開き、次のコマンドを入力します。

npm install --save bootstrap

次に.angular-cli.jsonファイルを開き、

"styles": [ "styles.css" ],

に変更

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

すべて完了。

新しいng-bootstrap 1.0.0-beta.5バージョンでは、BootstrapのマークアップとCSSに基づくネイティブAngularディレクティブのほとんどをサポートしています。

これを操作するために必要な唯一の依存関係はbootstrapです。jqueryとpopper.jsの依存関係を使用する必要はありません。

ng-bootstrapは、コンポーネントのJavaScript実装を完全に置き換えるものです。だからあなたは含める必要はありませんbootstrap.min.js .angular-cli.jsonのスクリプトセクションに。

ブートストラップを生成されたプロジェクトとangular-cli最新バージョンで統合する場合は、次の手順に従ってください。

• .angular bootstrap.min.css-cli.jsonのスタイルセクションにインキュルドします。

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

• ng-bootstrap依存関係をインストールします。

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

• これをメインモジュールクラスに追加します。

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

• メインモジュールのインポートセクションに以下を含めます。

  @NgModule({
     imports: [NgbModule.forRoot(), ...],
  })

• これらのモジュールクラス内でng-bootstrapコンポーネントを使用する場合は、サブモジュールでも以下を実行します。

  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
     imports: [NgbModule, ...],
  })

• これで、プロジェクトで使用可能なng-bootstrapコンポーネントを使用する準備ができました。

1. ブートストラップpopper.jsをインストールする

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

3. 中のsrc / Styles.cssを、輸入ブートストラップのスタイル

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

npm install bootstrap@latest --save-dev 手順1 ：これにより、ブートストラップの最新バージョンがインストールされますが、指定されたバージョンは、バージョン番号を追加することでインストールできます

ステップ2：styles.cssを開き、以下を追加します @import "~bootstrap/dist/css/bootstrap.css"

BootstrapとJqueryの両方を追加する場合

npm install bootstrap@3 jquery --save

このコマンドを実行したら、先に進んでnode_modulesフォルダーを確認してください。ブートストラップとjqueryが追加されているのを確認できるはずです。

angular-cliには、必要なすべてを見つけることができる専用のWikiページがあります。TLDR、bootstrap経由でインストールnpmし、.angular-cli.jsonファイルの"styles"セクションにスタイルリンクを追加します

angular-cliとcssを使用する場合の作業例：

1.ブートストラップをインストールする

npm install bootstrap tether jquery --save

2. .angular-cli.jsonに追加

  "styles": [
    "../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"
  ],

npmを使用してブーストラップをインストールする

npm install boostrap@next --save

次に、node_modulesフォルダーでboostrap.cssファイル（dist内）を確認します。通常、パスは

"../node_modules/bootstrap/dist/css/bootstrap.css",

このパスを追加| style.cssまたはstyle.scss内でboostrapをインポートする

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

それでおしまい。

プロジェクト内で次のコマンドを実行します

npm install --save @bootsrap@4

このような確認を受け取った場合

+ bootstrap@4.1.3
updated 1 package in 8.245s

これは、boostrap 4が正常にインストールされたことを意味します。ただし、使用するには、angular.jsonファイルの下の「styles」配列を更新する必要があります。

ブートストラップが既存のスタイルを上書きできるように、次のように更新します

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

すべてが正しく設定されていることを確認するには、を実行してからng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below、ブーストラップを使用することをお勧めします。

これはここにはありませんでした：

@import 'bootstrap/scss/bootstrap.scss';

私はstyle.scssにこの行を追加したばかりです。私の場合、ブートストラップ変数もオーバーライドしたいと思いました。

あなたがangularとbootstrapで始めたばかりの場合、簡単な答えはステップの下になります：1. dev依存関係としてbootstrapのノードパッケージを追加します

npm install --save bootstrap

2. angular.jsonファイルにブートストラップスタイルシートをインポートします。

   "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

3. これで、スタイリング、グリッドなどのブートストラップを使用する準備ができました。

   <div class="container">My first bootstrap div</div>

私が見つけたこの最も良い部分は、サードパーティのモジュールに依存せずにブートストラップを使用して指示していることでした。コマンドnpm install --save bootstrap@4.4などを更新するだけで、いつでもブートストラップをアップグレードできます。

AngularプロジェクトにBootstrap 4を追加する方法はたくさんあります：

• とタグを使用して、Angularプロジェクトのindex.htmlファイルのセクションにBootstrap CSSおよびJavaScriptファイルを含め、

• @importキーワードを使用して、Angularプロジェクトのグローバルstyles.cssファイルにBootstrap CSSファイルをインポートします。

• プロジェクトのangular.jsonファイルのスタイルとスクリプトの配列にBootstrap CSSファイルとJavaScriptファイルを追加する

このコマンドを実行する

npm install bootstrap@3

あなたのAngular.json

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

npm install bootstrapコマンドを使用して、角度でブートストラップをインストールできます。

angular.jsonファイルとstyle.cssファイルの次のセットアップブートストラップパス。

あなたは角度でブートストラップをインストールしてセットアップする方法についての完全なブログを読むことができます、これについての完全なブログを読むにはここをクリックしてください

angular-cliを使用する場合の実際の例：

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

cssとscssで動作します。Bootstrap v3およびv4が利用可能です。

bootstrap-schematicsの詳細については、こちらをご覧ください。