Angular6でBootstrap4を使ってみる

Angular6 になって、Angular CLI の設定ファイルが.angular-cli.jsonからangular.jsonに変わったとこともあり、少し記述を変更する必要があります。今回は備忘録も兼ねて、Angular6 でBootstrap4の読み込みかたをまとめてみました。

西村祐二

2018.06.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

どうも！大阪オフィスの西村祐二です。

下記ブログでAngular5でBootstrap4を使う方法が記載されていますが、

Angular5 で Bootstrap4 ( beta ) を使ってみよう #serverless #adventcalendar

Angular6 になって、Angular CLI の設定ファイルが.angular-cli.jsonからangular.jsonに変わったとこともあり、少し記述を変更する必要があります。今回は備忘録も兼ねて、Angular6 でBootstrap4の読み込みかたをまとめておきます。

環境

  • Angular CLI: 6.0.8
  • Node: 9.6.1
  • OS: darwin x64
  • Angular: 6.0.4
  • Bootstrap: 4.1.1

Angular CLI インストール

$ npm install -g @angular/cli@latest

雛形作成

$ ng new angular6-bootstrap4
$ cd angular6-bootstrap4

$ ng version

Angular CLI: 6.0.8
Node: 9.6.1
OS: darwin x64
Angular: 6.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

Bootstrap4 の導入

必要なモジュールをインストールします。

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

Angular では、グローバルに読み込むCSSやスクリプトをangular.jsonで指定できます。

angular.jsonになったことでの記載変更点

angular.jsonになったことで下記点を変更する必要がありました。

  • CSS、スクリプトを指定するときのパスを変更
    • 7行目のデフォルトのroot設定が"src"から""にかわったので、読み込むモジュールのパスもそれに合わせて変更する必要があります。
  • 複数箇所にパスを指定する
    • build時、test時にそれぞれ読み込む設定をわけれるようになったので、その分、Bootstrapのファイルを指定する必要があります。

具体的にangular.jsonは下記のようになります。

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular6-bootstrap4": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular6-bootstrap4",
            "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.slim.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular6-bootstrap4:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular6-bootstrap4:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular6-bootstrap4:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.slim.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "angular6-bootstrap4-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "angular6-bootstrap4:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "angular6-bootstrap4"
}

比較のために、Angular6以前の.angular-cli.jsonを記載しておきます。

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "angular-bootstrap"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.slim.min.js",
        "../node_modules/popper.js/dist/umd/popper.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

補足

cssはstyle.cssに下記のように記載することでも読み込むことが可能です。

style.css

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

確認

modalウインドウのサンプルを追加して、動作するか確認します。

src/app/app.component.html

・
・
・
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

ローカルサーバを起動します。

$ ng serve

その後、http://localhost:4200 にアクセスします。

スタイルもきちんと反映されています。

動作も問題なしです。

さいごに

いかがだったでしょうか。

Angular6 になって、Angular CLI の設定ファイルが.angular-cli.jsonからangular.jsonに変わったとこともあり、少し記述の仕方が変更されました。備忘録も兼ねてBootstrapの読み込み方をまとめてみました。

誰かの参考になれば幸いです。

customer-story-analytics