Configure Angular Material #16

Author: athlonUA

project/application/angular.json

@@ -23,8 +23,13 @@
                         "polyfills": "src/polyfills.ts",
                         "tsConfig": "src/tsconfig.app.json",
                         "assets": ["src/favicon.ico", "src/assets"],
-                        "styles": ["src/styles.scss"],
-                        "scripts": []
+                        "styles": [
+                            "node_modules/material-design-icons/iconfont/material-icons.css",
+                            "src/styles.scss"
+                        ],
+                        "scripts": [
+                            "node_modules/hammerjs/hammer.min.js"
+                        ]
                     },
                     "configurations": {
                         "production": {
@@ -70,8 +75,13 @@
                         "polyfills": "src/polyfills.ts",
                         "tsConfig": "src/tsconfig.spec.json",
                         "karmaConfig": "src/karma.conf.js",
-                        "styles": ["src/styles.scss"],
-                        "scripts": [],
+                        "styles": [
+                            "node_modules/material-design-icons/iconfont/material-icons.css",
+                            "src/styles.scss"
+                        ],
+                        "scripts": [
+                            "node_modules/hammerjs/hammer.min.js"
+                        ],
                         "assets": ["src/favicon.ico", "src/assets"]
                     }
                 },

project/application/package-lock.json

@@ -16,12 +16,14 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "^6.1.0",
+        "@angular/animations": "^6.1.3",
+        "@angular/cdk": "^6.4.6",
         "@angular/common": "^6.1.0",
         "@angular/compiler": "^6.1.0",
         "@angular/core": "^6.1.0",
         "@angular/forms": "^6.1.0",
         "@angular/http": "^6.1.0",
+        "@angular/material": "^6.4.6",
         "@angular/platform-browser": "^6.1.0",
         "@angular/platform-browser-dynamic": "^6.1.0",
         "@angular/platform-server": "^6.1.0",
@@ -33,8 +35,11 @@
         "domino": "^2.1.0",
         "es5-shim": "^4.5.10",
         "es6-shim": "^0.35.3",
+        "hammerjs": "^2.0.8",
+        "material-design-icons": "^3.0.1",
         "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,12 +1,14 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { RoutingModule } from '../routing/routing.module';
 
 @NgModule({
     imports: [
         BrowserModule.withServerTransition({ appId: 'angular-universal' }),
         BrowserTransferStateModule,
+        BrowserAnimationsModule,
         RoutingModule,
     ],
 })

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

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material';
+
+@NgModule({
+    imports: [MatButtonModule],
+    exports: [MatButtonModule],
+})
+export class CustomMaterialModule {}

project/application/src/app/modules/custom-material/custom-material.module.ts

@@ -1 +1,10 @@
 <h1>{{ title }}</h1>
+
+<div class="button-row">
+    <button mat-raised-button>Basic</button>
+    <button mat-raised-button color="primary">Primary</button>
+    <button mat-raised-button color="accent">Accent</button>
+    <button mat-raised-button color="warn">Warn</button>
+    <button mat-raised-button disabled>Disabled</button>
+    <a mat-raised-button routerLink=".">Link</a>
+</div>

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

@@ -0,0 +1,5 @@
+.button-row {
+    button, a {
+        margin-right: 8px;
+    }
+}

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

@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core';
 
 import { HomeRoutingModule } from './home-routing.module';
+import { CustomMaterialModule } from '../custom-material/custom-material.module';
 import { HomeComponent } from './home.component';
 
 @NgModule({
-    imports: [HomeRoutingModule],
+    imports: [HomeRoutingModule, CustomMaterialModule],
     declarations: [HomeComponent],
 })
 export class HomeModule {}

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

@@ -0,0 +1 @@
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";

project/application/src/styles.scss

@@ -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',