☰

Angular 6プロジェクトにブートストラップを追加するにはどうすればいいですか? [重複] 質問する

tag-icon • tag-icon javascript html angular angular-ui-bootstrap
Angular 6プロジェクトにブートストラップを追加するにはどうすればいいですか? [重複] 質問する

アプリコンポーネント

インデックス.html

アプリコンポーネント

パッケージにスタイル依存関係を追加しようとしましたangular.jsonが、モジュールが見つからないと表示されます。2つのブートストラップファイルを追加します。ここに両方の​​ファイルのスクリーンショットがあります

angular.jsonファイルは次のようになりますangular.json ファイル

ベストアンサー1

Angular バージョン 11 以上の場合

構成

angular.json 構成のスタイルとスクリプトのオプションを使用して、パッケージを直接参照できるようになりました。

ビフォアー"styles": ["../node_modules/bootstrap/dist/css/bootstrap.css"]
アフター："styles": ["bootstrap/dist/css/bootstrap.css"]

          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ng6",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css","bootstrap/dist/css/bootstrap.min.css"

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

Angular バージョン 10 以下

Angular 2ではなくv6を使用しています

Angular v6以降

Angular 6 以降の CLI プロジェクトでは、ビルドとプロジェクト構成に のangular.json代わりにが使用されます。.angular-cli.json

各 CLI ワークスペースにはプロジェクトがあり、各プロジェクトにはターゲットがあり、各ターゲットには構成があります。ドキュメント

. {
  "projects": {
    "my-project-name": {
      "projectType": "application",
      "architect": {
        "build": {
          "configurations": {
            "production": {},
            "demo": {},
            "staging": {},
          }
        },
        "serve": {},
        "extract-i18n": {},
        "test": {},
      }
    },
    "my-project-name-e2e": {}
  },
}

オプション1
実行 のnpm install bootstrap@4 jquery --save
JavaScript部分Bootstrapは に依存していますjQuery。そのため、jQuery JavaScriptライブラリファイルも必要です。angular.jsonで、ターゲット

の下のスタイルとスクリプトの配列にファイルパスを追加します。build
注記：v6より前のAngular CLIプロジェクト構成は以下に保存されていました<PATH_TO_PROJECT>/.angular-cli.json.。v6ではファイルの場所が以下に変更されました。angular.json.先頭のドットがなくなったため、ファイルはデフォルトで非表示ではなくなり、同じレベルにあります。
つまり、angular.jsonのファイルパスには先頭のドットとスラッシュを含めないでください。

つまり、相対パスの代わりに絶対パスを指定できます

ファイル.angular-cli.jsonパスに"../node_modules/"
はangular.json"node_modules/"

 "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ng6",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/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"]
          },

オプション2
CDN（コンテンツ配信ネットワーク）からプロジェクトにファイルを追加するCDNリンク

ファイルsrc/index.htmlを開いて挿入します

<link>Bootstrap CSS ファイルを含めるための head セクションの末尾の要素、jQuery
を<script>body セクションの下部に含めるための要素、
Popper.js<script>を body セクションの下部に含めるための要素、Bootstrap JavaScript ファイルを body セクションの下部に含めるための
要素<script>

  <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Angular</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
      <app-root>Loading...</app-root>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
    </html>

オプション3
実行npm install bootstrap
時にsrc/styles.css次の行を追加します。

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

オプション4
ng-ブートストラップBootstrapのマークアップとCSSに基づいたネイティブAngularディレクティブのセットが含まれています。その結果、jQueryやBootstrapのJavaScriptに依存しません。

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

インストール後、ルートモジュールにインポートし、@NgModuleimports`配列に登録します。

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})

注記
ng-bootstrapプロジェクトにBootstrapの4つのcssを追加する必要があります。次のように明示的にインストールする必要があります:
npm install bootstrap@4 --saveangular.jsonで、buildターゲットの下のstyles配列にファイルパスを追加します。

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

PS サーバーを再起動してください

`ng サーブ || npm スタート`��

おすすめ記事