web-dev-qa-db-ja.com

bootstrap 6プロジェクトにangularを追加する方法は？

app.component.html

index.html

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

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

javascripthtmlangularangular-ui-bootstrap
33
nikhil sugandh

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

Angular v6以降

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

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

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

オプション-1
execute npm install bootstrap@4 jquery --save
BootstrapのJavaScript部分は、jQueryに依存しています。したがって、jQueryJavaScriptライブラリファイルも必要です。

angular.jsonで、buildターゲットの下にあるスタイルとスクリプトの配列にファイルパスを追加します
注：v6以前は、Angular CLIプロジェクト構成は<PATH_TO_PROJECT>/.angular-cli.json.に保存されていましたv6以降ファイルの場所がangular.json.に変更されました。先頭のドットがなくなるため、ファイルはデフォルトで非表示にならず、同じレベルになります。
これは、angle.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 LINK

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

Bootstrap CSSファイルを含めるためのheadセクションの最後にある<link>要素
aセクションの下部にjQueryを含める<script>要素
a <script>要素。本文セクションの下部にPopper.jsを含めます
aセクションの下部にBootstrap JavaScriptファイルを含める<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ブートストラップに基づいた一連のネイティブAngularディレクティブが含まれていますマークアップとCSS。その結果、jQueryやBootstrapのJavaScriptに依存しません

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

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

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

NOTE
ng-bootstrapでは、Bootstrapの4 cssをプロジェクトに追加する必要があります。次の方法で明示的にインストールする必要があります。
npm install bootstrap@4 --save angular.jsonで、buildターゲットの下のスタイル配列にファイルパスを追加します。

   "styles": [
                  "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],
124
Vikas
npm install --save bootstrap

その後、プロジェクトのルートフォルダー内のangular.json（以前は.angular-cli.json）内で、スタイルを見つけ、bootstrap cssファイルを次のように追加します。

"styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "styles.css"
],
9
jayant mishra
npm install bootstrap --save

そして、CSSファイルの場合はstyleプロパティの下、JSファイルの場合はscriptsの下のangular.jsonファイルに関連ファイルを追加します。

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

コマンドを使用して

    npm install bootstrap --save

open 。angular.json old （。angular-cli.json）ファイルは「スタイル」にbootstrap cssファイルを追加します

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