私はAngularを学び始め、チュートリアルをフォローしています。ナビゲーションバーのチュートリアルのようにコードを配置してみました:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">Recipe book</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li> <a href="#">Recipe</a></li>
<li> <a href="#">Shopping list</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<ul class="dropdown-menu">
<li><a href="#">Save data </a></li>
<li><a href="#">Fetch data </a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
しかし、私が得るすべてはこれです:
ブートストラップを外すと、他のアイテムが手に入ります。
ブートストラップを使用するには、styles.cssでnpm install bootstrap --save
と@import "~bootstrap/dist/css/bootstrap.css";
を使用しました。
編集:
私は2つの問題を含む質問を開きたくありませんでしたが、これまでの回答を調べた後、私が抱えていた別の問題について説明することはできません。
また、nmp install jquery --save
を使用してJqueryをインストールし、angular.jsonに追加しました。
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/tether/dist/js/tether.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
この場合、@import "~bootstrap/dist/css/bootstrap.css";
をstyles.css`から削除した後、bootstrapはまったく機能しません。bootstrap=を機能させる唯一の方法質問で説明したとおりです。
編集2:
私は新しいプロジェクトを開始し、@ HDJEMAIの回答の指示に従いました。今でも画像と同じページが表示されますが、そのページは、angular.jsonのスタイルとスクリプトに追加された行を介して機能し、styles.cssファイルの@import "~bootstrap/dist/css/bootstrap.css"
を介して機能しません。しかし、コードは同じですが、問題はチュートリアルと同じではありません。
bootstrap
とJQuery
の両方をインストールする必要があります:
npm install bootstrap jquery --save
次に、これらのファイルがノードモジュールフォルダーにあります。
node_modules/jquery/dist/jquery.min.js
node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/js/bootstrap.min.js
次に、angular.jsonファイルを更新する必要があります。
"styles": [
"styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
],
jquery.min.js
スクリプトを追加しない場合、Bootstrapは機能しません。
別の要件は、popper.js
必要な場合Bootstrap dropdown次に、それをインストールし、スクリプトファイルも追加する必要があります
npm install popper.js
次に、このスクリプトも追加します
"styles": [
"styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/popper.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
親愛なる友人iamが同じangular6チュートリアルを勉強しています。私も同じ状況に直面しました。最後に、これを解決しました。最初のアンインストールブートストラップ。次のステップは、次のコマンドでbootstrapをインストールすることです
npm install --save bootstrap@3 A
次に、styles.cssに移動して貼り付けます
@import "node_modules/bootstrap/dist/css/bootstrap.css"
アプリケーションは間違いなくudemyのビデオチュートリアルとまったく同じように動作します
bootstrapパスをangular.jsonファイルに追加する場合は、project\architect\build内のstylesであることを確認してください。project\architect\testにあるものではありません。
{
"projects": {
"architect": {
"build": {
"styles": [
"node_modules/bootstrap/dist/bootstrap.min.css",
"src/styles.css"
],
"test": {
"styles": [
"src/styles.css"
],
この3つのリンクをindex.htmlファイルに追加します。 bootstrapまたはjqueryをインストールしたり、angular.jsonファイルを更新したりする必要はありません。チャームとして機能します。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
同じ問題がありました。以下は私のために役立ちました。
サーバーを停止し、ng serveを使用して再コンパイルします
bootstrapをインストールしてangular.json
ファイルに追加した後。
bootstrapが表示されない場合は、開発URLのポートを変更してください:
ng serve --port <your choice of port>
いろいろチェックする
"../"...
または"./"...
または/
また、「js」ファイルまたは「js」ファイルに依存する「css」ファイルをこの理由で追加したいので、「style.css」で使用したくないので、最善の方法は
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
しかし、ブラウザやIDEだけでなくPCを再起動します
install npm install bootstrap@latest jquery --save
install npm install popper.js;
次に、Angular.jsonファイル(行番号47)に移動して、次の行を変更します。
"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/popper.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
],
bootstrapが機能するには、jQueryとpopperを追加する必要があります。
NPMを使用してブートストラップ、jQuery、ポッパーをインストールする
1)インストールbootstrap npm install bootstrap --save
2)jQueryをインストールしますnpm install jquery --save
3)Popperをインストールしますnpm install popper.js --save
4)それぞれのファイルがnode_modulesフォルダーにインストールされているかどうかを確認します。5)angular.jsonファイルで、インストールされているファイルのパスを以下と同じ順序で指定します。
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
5)ng serveをもう一度実行します。Bootstrapが動作するはずです!!
上記の回答とまったく同じことをしましたが、同じ問題に直面しました。私の場合、angular.jsonで間違ったpopper.jsパスを参照していました
"node_modules/popper.js/dist/js/popper.js",
の代わりに
"node_modules/popper.js/dist/umd/js/popper.js",
ブートストラップの問題が原因だと思います。これを試してください:
ステップ1。.angular-cli.json
ファイル内
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
]
削除"../node_modules/bootstrap/dist/css/bootstrap.min.css"
ステップ2。styles.css
に移動します
インポートbootstrapこの行を追加して
@import "~bootstrap/dist/css/bootstrap.css";
これらの手順により、ビルドプロセス中に発生したエラーが解決されました。
私が見ているように、UDEMYの「MaximilianSchwarzmüller」コースをフォローしている場合は、Bootstrap 3、他に何もインストールしていないことを確認してください。プロジェクトフォルダでこれらのコマンドを使用します(他の場合のみアンインストールします)バージョンがインストールされています)。
npm uninstall --save bootstrap
npm install --save bootstrap@3
これにより、プロジェクトのローカルにインストールされます。
私はBootstrap4をインストールし(コースは3ではなく4でも機能すると考えます)、Bootstrap3を使用すると、コースと同じこのプロジェクトで機能しました(ポッパーとjQueryなし)。
Angular.jsonを追加する
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"xtreme-admin-angular": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/xtreme-admin-angular",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/bootstrap.min.css"
//Your root depend this path
]
プロジェクトを再実行します
ブートストラップからJavaScript部分とフォントが欠落しています。これが、ナビゲーションバーの折りたたまれた部分が表示されない理由です。 BootstrapはjQueryを使用するため、angularではあまり機能しません。
BootstrapとAngularはすでに別のプロジェクトに統合されています。これを使用してみてください: https://angular-ui.github.io/bootstrap/
多くのことに疲れましたが、これは今日私にとってうまくいきました:
package.json
"dependencies": {
"@angular/animations": "~8.2.5",
"@angular/common": "~8.2.5",
"@angular/compiler": "~8.2.5",
"@angular/core": "~8.2.5",
"@angular/fire": "^5.2.1",
"@angular/forms": "~8.2.5",
"@angular/platform-browser": "~8.2.5",
"@angular/platform-browser-dynamic": "~8.2.5",
"@angular/router": "~8.2.5",
"bootstrap": "^4.3.1",
"bootstrap-sass": "^3.3.7",
"firebase": "^6.6.0",
"jquery": "^3.4.1",
"moment": "^2.24.0",
"node-sass": "^4.11.0",
"popper.js": "^1.15.0",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
}
angular.json
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
上記の方法は問題ありませんが、すべてを正しく実行している場合でも、うまく機能しない場合があります。私は個人的にcss/jsを手動でダウンロードしてそれらをアセットフォルダーに保存し、index.htmlにリンクを提供することを好みます。何かがうまくいかない場合、ブラウザコンソールが問題を教えてくれますが、従来のアプローチでは、ブラウザコンソールは情報/エラーを提供しません。