[解決済み] angular 2でbootstrap 4を使用するには？

質問

typescriptで書かれたangular 2のアプリを作っています。bootstrap 4フレームワークをカスタムテーマと組み合わせて使用したいのですが、可能でしょうか？

npmパッケージは、ブートストラップのCSSクラスを使用することを許可しないので、機能しませんが、代わりにカスタムコンポーネントを提供します。( http://github.com/valor-software/ng2-bootstrap )

私のangular 2プロジェクトではsassを使っていますが、bootstrap 4もスタイリングにsassを使っているので、ソースからビルドすることは可能でしょうか？

どのように解決するのですか？

Angular2 CLI用Bootstrap4アルファ（Angular4 CLIでも使用可能）

を使用している場合 angular2 cli/angular 4 cli を実行してください。

npm i bootstrap@next --save

これで、プロジェクトにbootstrap 4が追加されます。

次に src/style.scss または src/style.css ファイルを作成し、そこにbootstrapをインポートします。

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

scss を使用している場合、デフォルトのスタイリングを scss に変更するよう .angular-cli.json :

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

Bootstrap JS コンポーネント

Bootstrap JS コンポーネントを動作させるためには、インポートする必要があります。 bootstrap.js を .angular-cli.json 下 scripts (これは自動的に行われるはずです) :

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

2017/09/13に更新しました。 Boostrap 4 Betaでは、tether.jsの代わりにpopper.jsを使用するようになりました。そのため、どちらのバージョンを使用しているかによって、スクリプト内でtether.js（アルファ）またはpopper.js（ベータ）のいずれかをインポートしてください。 ご指摘ありがとうございます @MinorThreat