[解決済み】angular-cliプロジェクトにbootstrapを追加する方法

質問

angular-cli 1.0.0-beta.5 (w/node v6.1.0) で生成したアプリに bootstrap 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がビルド部分を'世話'してくれるので、angular-cliが提供すべきことのように思えますが？

• にjquery、bootstrap、tetherを追加しました。 src/system-config.ts でバンドルに取り込みます。 main.ts ? しかし、アプリケーションのコードでそれらを明示的に使用する予定がないことを考えると、それは間違っているように思えました（例えば、moment.jsやlodashのようなものとは異なります）。

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

重要な更新です。 ng2-bootstrap は、現在、次のように置き換えられています。 ngx-bootstrap

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

更新情報 : 1.0.0-beta.11-webpack またはそれ以上のバージョン

まず最初に angular-cli のバージョンは、ターミナルで以下のコマンドを実行してください。

ng -v

もし、あなたの アンギュラークリ よりも大きなバージョンです。 1.0.0-beta.11-webpack の場合、以下の手順を実行してください。

1. インストール ngx-bootstrap と ブートストラップ :

   npm install ngx-bootstrap bootstrap --save
   
   

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

1. 開く src/app/app.module.ts を追加してください。

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

2. 開く angular-cli.json (angular6以降では、ファイル名が angular.json に新しいエントリを挿入してください。 styles の配列になります。

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

3. 開く src/app/app.component.html を追加してください。

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

1.0.0-beta.10またはそれ以下のバージョン。

そして、もしあなたの アンギュラークリ バージョンは 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'
  }
};