Configure Angular Bootstrap UI KIT #14

Author: athlonUA

project/application/angular.json

@@ -23,8 +23,16 @@
                         "polyfills": "src/polyfills.ts",
                         "tsConfig": "src/tsconfig.app.json",
                         "assets": ["src/favicon.ico", "src/assets"],
-                        "styles": ["src/styles.scss"],
-                        "scripts": []
+                        "styles": [
+                            "node_modules/font-awesome/scss/font-awesome.scss",
+                            "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
+                            "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
+                            "src/styles.scss"
+                        ],
+                        "scripts": [
+                            "node_modules/chart.js/dist/Chart.min.js",
+                            "node_modules/hammerjs/hammer.min.js"
+                        ]
                     },
                     "configurations": {
                         "production": {
@@ -70,8 +78,16 @@
                         "polyfills": "src/polyfills.ts",
                         "tsConfig": "src/tsconfig.spec.json",
                         "karmaConfig": "src/karma.conf.js",
-                        "styles": ["src/styles.scss"],
-                        "scripts": [],
+                        "styles": [
+                            "node_modules/font-awesome/scss/font-awesome.scss",
+                            "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
+                            "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
+                            "src/styles.scss"
+                        ],
+                        "scripts": [
+                            "node_modules/chart.js/dist/Chart.min.js",
+                            "node_modules/hammerjs/hammer.min.js"
+                        ],
                         "assets": ["src/favicon.ico", "src/assets"]
                     }
                 },

project/application/package-lock.json

@@ -28,13 +28,18 @@
         "@angular/router": "^6.1.0",
         "@nguniversal/express-engine": "6.0.0",
         "@nguniversal/module-map-ngfactory-loader": "6.0.0",
+        "angular-bootstrap-md": "^6.2.2",
+        "chart.js": "^2.5.0",
         "classlist.js": "^1.1.20150312",
         "core-js": "^2.5.4",
         "domino": "^2.1.0",
         "es5-shim": "^4.5.10",
         "es6-shim": "^0.35.3",
+        "font-awesome": "^4.7.0",
+        "hammerjs": "^2.0.8",
         "rxjs": "^6.0.0",
         "ts-loader": "^4.4.2",
+        "webpack-node-externals": "^1.7.2",
         "zone.js": "~0.8.26"
     },
     "devDependencies": {

project/application/package.json

@@ -1 +1,3 @@
 <h1>{{ title }}</h1>
+
+<button mdbBtn type="button" color="primary" class="waves-light" mdbWavesEffect>Primary</button>

project/application/src/app/modules/home/home.component.html

@@ -1,10 +1,12 @@
-import { NgModule } from '@angular/core';
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { MDBBootstrapModule } from 'angular-bootstrap-md';
 
 import { HomeRoutingModule } from './home-routing.module';
 import { HomeComponent } from './home.component';
 
 @NgModule({
-    imports: [HomeRoutingModule],
+    imports: [HomeRoutingModule, MDBBootstrapModule.forRoot()],
     declarations: [HomeComponent],
+    schemas: [NO_ERRORS_SCHEMA],
 })
 export class HomeModule {}

project/application/src/app/modules/home/home.module.ts

@@ -1,13 +1,19 @@
 const path = require('path');
 const webpack = require('webpack');
+const nodeExternals = require('webpack-node-externals');
 
 module.exports = {
     entry: { server: './server.ts' },
     resolve: { extensions: ['.js', '.ts'] },
     target: 'node',
     mode: 'none',
     // this makes sure we include node_modules and other 3rd party libraries
-    externals: [/node_modules/],
+    externals: [
+        /node_modules/,
+        nodeExternals({
+            whitelist: [/^hammerjs/],
+        }),
+    ],
     output: {
         path: path.join(__dirname, 'tmp'),
         filename: '[name].js',