web-dev-qa-db-ja.com

Angular 5 with Bootstrap 4 not working

私は新しいAngular 5プロジェクトを作成しました。その後、 Angular CLI GitHubページ に記載されている指示に従ってBootstrap 4.0.0を使用しましたAngular 5.2.2。 'npm install bootstrap'を使用してブートストラップをインストールしていますが、...

Unknown error from PostCSS plugin. Your current PostCSS version is 
6.0.15, but autoprefixer uses 5.2.18. Perhaps this is the source of 
the error below.
...
...
ERROR in ./node_modules/css-loader?
{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-
loader/lib{"ident":"postcss","sourceMap":false}!./node_modules/bootstrap/
dist/css/bootstrap.min.css
Module build failed: BrowserslistError: Unknown browser major
...
...
webpack: Failed to compile.
angularbootstrap-4angular5
6
Peter

以下は、私が経験したさまざまなチュートリアルのわかりやすい統合です。使用しているバージョンによって異なることに注意してください。

1. angular cliをインストールします

npm install -g @angular/cli

2. Angularプロジェクトをangular cliを使用して作成します

ng new my-awesome-project

3.依存関係をインストールする

次に、新しいプロジェクトでcdを実行し、必要な依存関係をインストールします。

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

popper.jsについての感想。このlibはBootstrapによって使用されます。ただし、npm install popper.js --saveを正確に実行する必要があります。これは、popperがnpmによって配布される別のjs libであるためです。

これが私の現在の設定です：

angular cli: 1.6.8
angular: ^5.2.0
bootstrap: ^4.0.0
jquery: ^3.3.1
popper.js: ^1.12.9

4.依存関係をプロジェクトに統合する

すべての依存関係が揃ったので、プロジェクトに「プラグイン」bootstrap "する必要があります。

.angular-cli.jsonファイルを開き、scriptセクションを次のように更新します。

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

最後に、src\styles.cssを開いて追加します。

@import "~bootstrap/dist/css/bootstrap.css";

プロダクションモードでangularプロジェクトを実行するときに必要な最後の操作。

20
avi.elkharrat

npm install bootstrap --save

開いた .angular-cli.jsonまたはangular.jsonファイルと上記の回答に示されているスクリプトセクションの更新。また、それをスタイル配列に追加します。

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

これが機能しない場合は、src\styles.cssと追加：

@import "~bootstrap/dist/css/bootstrap.css";

5
Dipan Mandal

使用する npm install bootstrapインストールするBootstrap 4.0.0。 Bootstrap 自体とその npm-package を見てください。

（Bootstrap 3.3のパッケージは bootstrap@3 ）

2
pzaenger

あなたが持っていることを確認してください、

1. Added the bootstrap.css file
2. Copied the fonts folder of bootstrap into the project
3. Added the file name in angularcli.json file
1
firstpostcommenter

npmで利用可能な[email protected]ベータ版にbootstrap @ nextダウングレードを使用する代わりに、bootstrapのベータ版にダウングレードする必要があります。

1
niteshbisht

Bootstrapはpopperとjqueryに依存しています。ブートストラップと共にこれらのモジュールをインストールすることは常に良い考えです。

npm install --save bootstrap@4 jquery@version popper@version

--saveを使用すると、package.jsonにこれらの依存関係が追加されます。

次に、angular.json（Angular 6およびcli v6）またはangular-cli.json（Angular 5以下およびcli v1.7）に移動し、bootstrap=のcssをノードモジュールに貼り付けます。スタイルの配列の下で、スクリプトの下にjquery、popper、bootstrap.jsファイルを追加します。

お役に立てば幸いです。

1
Siddhartha Thota