web-dev-qa-db-ja.com

Angular-Cliプロジェクトにブートストラップを追加する方法

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に依存関係をコピーしますか？しかし、それは構築部分の「面倒を見る」ので、angle-cliが提供すべきもののように思えますか？

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

twitter-bootstrapangularangular-cli
192
Jerome

重要なアップデート： ng2-bootstrapは に置き換えられました ngx-bootstrap - /

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

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

まずターミナルで以下のコマンドで angular-cli versionをチェックしてください。

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 を開き、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以下のバージョン：

そして、あなたの angular-cli versionが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'
  }
};
268
pd farhad

https://github.com/angular/angular-cli にあるWord> Global Library Installationというキーを探してください。

彼らの文書によると、あなたはBootstrapライブラリを追加するために次のステップを踏むことができます。

まずnpmからBootstrapをインストールします。

npm install bootstrap@next

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

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

最後に、ブートストラップCSSをapps [0] .styles配列に追加します。

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

実行中の場合はng serveを再起動してください。これでBootstrap 4があなたのアプリで動作するはずです。

これが最善の解決策です。しかし、あなたがng serveを再起動しなければ、それは決してうまくいきません。この最後のアクションを実行することを強くお勧めします。

104
Nelly Sattari

以下をせよ：

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"
],
49
mahatmanich

最初に、あなたはこれらのコマンドでtether、jqueryとbootstrapをインストールしなければなりません

npm i -S tether
npm i -S jquery
npm i -S [email protected]

これらの行を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"
  ]
28
Alberto Viezzi

誰もまだBootstrapを含める方法についての公式な（angle-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;

フォントの色が変更されたことを確認するためにブラウザを返します。

20
tilo

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 in 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

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

16
Shigiang Liu

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

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>
9
shakram02

Angular 5のブートストラップ4の手順

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

    新しいAngularBootstrapTestをng

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

    cd AngularBootstrapTest

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

    npm install bootstrap

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

    4.1 open .angular-cli.json

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

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

    。

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

これで、角度5プロジェクトにブートストラップcssを正常に追加しました

テストブートストラップ

  1. src/app/app.component.htmlを開く
  2. ブートストラップボタンコンポーネントを追加する

。

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

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

  1. ファイルを保存する

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

    ng serve --open

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

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

7
rashidnk

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

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

ライブラリから引用：

このライブラリは、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 {
}

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

6
Jimmy Kane

以下の手順を実行してください。

  1. npm install --save bootstrap

  2. そしてあなたの.angular-cli.jsonで、stylesセクションに追加してください：

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

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

楽しい

5
Léger Djiba

  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"
      ],

  1. 最後に、bootstrap.cssをコードのstyle.scssに追加します。

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

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

4
Xjw919

これを試して

npm install bootstrap@next

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

3
neoerol
  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" ],
2
srijishks
  1. ブートストラップpopper.jsをインストールします

npm install --save bootstrapnpm install --save popper.js

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

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

2
FEUJIO Marie Therese

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

npm install --save bootstrap

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

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

それをに変える

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

全部できた。

2
Raj Sahoo

Angular-Cliで生成されたプロジェクトにブートストラップを追加する方法についての有益な情報を提供しているMike Brocchiによるビデオもご覧いただけます。 https://www.youtube.com/watch?v=obbdFFbjLIU （約13分13時）

2
Nelly Sattari

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

これを扱うのに必要な唯一の依存関係はbootstrapです。 jquery および popper.js の依存関係を使用する必要はありません。

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

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

  • .angular-cli.jsonのstylesセクションにbootstrap.min.cssを入れます。

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

  • ng-bootstrap dependencyをインストールします。

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

  • これをあなたのメインモジュールクラスに追加してください。

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

  • メインモジュールのimportsセクションに以下を含めてください。

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

  • これらのモジュールクラス内でng-bootstrapコンポーネントを使用する予定であれば、サブモジュールでも以下を実行してください。

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

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

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

2
JLS

Angular-cliとcssを使用した場合の動作例

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

npmインストールブートストラップtether jquery --save

2.angle-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"
  ],
1
ilia

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

1
Claudiu Constantin

  1. Npmを使ってブートストラップをインストールする

    npm install bootstrap

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

npm install --save popper.js

3.ジャンプ angular.json in Angular 6プロジェクト/ .angular-cli.json in Angular 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"
        ]
1
Konvivial

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

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

1
kireeti9

npmを使ってboostrapをインストールする

npm install boostrap@next --save

それから、node_modulesフォルダのboostrap.cssファイルを（dist内で）チェックしてください。通常はパスは

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

このパスを追加style.cssまたはstyle.scss内のインポートブースト

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

それでおしまい。

1
S.D.N Chanaka Fernando

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

npm install bootstrap@3 jquery --save

このコマンドを実行した後、node_modulesフォルダーを確認してください。bootstrapとjqueryが追加されていることがわかります。

1
Alexander Zaldostanov

プロジェクト内で次のコマンドを実行してください。

npm install --save @bootsrap@4

そしてあなたがこのような確認を得たら

+ [email protected]
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を実行してください。その後、boostrapを使用してください。 enter image description here

0
tadtab

どのJSフレームワークを使用しているかは関係ありません。ブートストラップをプロジェクトにインポートするのは、次の2つのステップに従うことで簡単です。

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

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

0
Srinivas

ここにこれを見ませんでした：

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

Style.scssにこの行を追加しました。私の場合は、bootstrap変数もオーバーライドしたいです。

0
Andris

これら3行をindex.htmlのHeadタグに追加するだけです。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
0
tejeswar

Angular-Cliを使用した場合の実用的な例：

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

Cssとscssで動作します。ブートストラップv3とv4が利用可能です。

ブートストラップ図の詳細については、 here を参照してください。

0
Slupek

npm i --save bootstrap@versionを使用してブートストラップをインストールします｡次に、nodemodulesフォルダーに移動し、bootstrapフォルダーから 'bootstrap.min.css.js'のパスをコピーし、スクリプトタグファイルの下のnodemodules/bootstrap/css/bootstrap.min.css.jsにフルパス（angular.jsonなど）を貼り付けて、サーバーを再実行します。インストールが成功したかどうかを確認するには、好きなブラウザでプログラムを実行し、F12キーを押してウィンドウの一部が開いていることを確認してください。成功しました。

0
Alekya