290

angular-cli 1.0.0-beta.5 (ノード 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付きのビルドを作成するとすぐに、これらの依存関係はすべて消えました(驚き!)。-proddist/vendor

angular-cli で生成されたプロジェクトで、そのようなシナリオ (つまり、ブートストラップ スクリプトの読み込み) をどのように処理するつもりですか?

私たちは次のような考えを持っていましたが、どちらに進むべきか本当にわかりません...

  • CDN を使用しますか? ただし、これらのファイルが利用可能であることを保証するために、これらのファイルを提供したいと考えています

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

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

4

40 に答える 40

332

重要な更新: ng2-bootstrapはngx -bootstrapに置き換えられました

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

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

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

ng -v

angular-cli のバージョンが1.0.0-beta.11-webpackより大きい場合は、次の手順に従う必要があります。

  1. ngx-bootstrapと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.jsonstylesに変更)、配列に新しいエントリを挿入します。

    "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 以下のバージョン:

また、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'
  }
};
于 2016-06-07T08:52:39.843 に答える
73

以下をせよ：

npm i bootstrap@next --save

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

次に、src/style.scssまたは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"
],
于 2016-10-07T09:45:21.633 に答える
33

最初に、これらのコマンドでテザー、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"
  ]
于 2016-10-01T17:18:38.973 に答える
8

2つの簡単なステップ

  1. Bootstrap をインストールします (最新バージョンをインストールしています)
npm install bootstrap@next
  1. プロジェクトにインポートし、styles.scss に以下の行を追加します
@import '~bootstrap';

インポートの順序が重要になる可能性があることに注意してください。ブートストラップを使用する他のライブラリがある場合は、このインポート ステートメントを一番上にしてください。

終わり。:)

注：以下は私のバージョンです

角度: 9

ノード: v10.16.0

npm: 6.9.1

于 2020-07-27T12:06:27.813 に答える
5

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

    npm install bootstrap

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

npm install --save popper.js

3. Angular 6 プロジェクトの angular.json / Angular 5の .angular-cli.jsonに移動し、リストされているものを追加します。

 "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"
        ]
于 2018-05-06T16:51:30.600 に答える
3
  1. ブートストラップ、popper.js をインストール

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

  1. src/styles.cssで、ブートストラップのスタイルをインポートします

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

于 2018-07-26T02:18:31.047 に答える
3

Angular-CLI の新しいバージョンでは、多くのソリューションが機能しなくなっていることがわかります。

app.component.html の上部に次のリンク タグを追加し、下部にスクリプト タグを追加してみてください。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

ただし、ngx-bootstrap を使用する場合は、プロジェクト ディレクトリで次のコマンドを実行します。

ng add ngx-bootstrap

app.component.html のコンテンツとして次のようにテストしてください。

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
于 2020-06-27T16:06:58.643 に答える
2

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

npm install --save bootstrap

次に、Bootstrap Sass をアプリケーションにインポートする必要があります。styles.scss に次の行を追加します。

@import "../node_modules/bootstrap/scss/bootstrap.scss";

詳細については...

于 2021-09-15T05:20:58.650 に答える
2

angular と bootstrap を使い始めたばかりの場合、簡単な答えは次の手順になります。 1. dev 依存関係としてブートストラップのノード パッケージを追加します。

npm install --save bootstrap

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

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

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

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

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

于 2019-12-23T08:48:30.537 に答える
2

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

Step2: styles.css を開いて以下を追加 @import "~bootstrap/dist/css/bootstrap.css"

于 2019-01-03T16:23:09.617 に答える
1

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

于 2017-07-13T09:02:27.720 に答える
0

どの JS フレームワークを使用しているかは問題ではありません。プロジェクトへのブートストラップのインポートは、以下の 2 つの手順に従って簡単に行うことができます。

npm i -S bootstrapまたはを使用してブートストラップをインストールしますyarn add bootstrap。

styles.cssまたはで、styles.scssブートストラップを としてインポートし@import '~bootstrap/dist/css/bootstrap.min.css'ます。

于 2018-10-19T18:07:38.110 に答える