次にjQueryとBootstrapもインストールしておく。

$ npm install jquery bootstrap@3 –save
+ jquery@3.3.1
+ bootstrap@3.3.7
added 2 packages from 2 contributors and audited 38986 packages in 15.177s
found 0 vulnerabilities

そして、angular.jsonにインストールしたファイルを組み込む。

“architect”: {
“build”: {
“builder”: “@angular-devkit/build-angular:browser”,
“options”: {
“outputPath”: “dist/cmsproject”,
“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.css”
],
“scripts”: [
“node_modules/jquery/dist/jquery.js”,
“node_modules/bootstrap/dist/js/bootstrap.js”
]
},

赤色は追加した部分。

もう一度サーバを立ち上げ直してみる。

$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-10-02T14:01:14.518Z
Hash: c343c06bcd8a1fb9b97f
Time: 9685ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 341 kB [rendered]
chunk {styles} styles.js, styles.js.map 165 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.28 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.

赤色の部分を見てもらうと、バンドルされたスクリプトの容量が増加していることがわかる。

localhost:4200をもう一度ブラウザで見る。

変化していることが分かります！