From ec3bb7edf1ff8970d08a17cc123e105fc10bfb18 Mon Sep 17 00:00:00 2001 From: Alexander G Date: Tue, 28 Aug 2018 19:30:29 +0300 Subject: [PATCH] Configure Angular Material #16 --- project/application/angular.json | 18 ++++++-- project/application/package-lock.json | 46 +++++++++++++++++-- project/application/package.json | 7 ++- .../src/app/modules/core/core.module.ts | 2 + .../custom-material/custom-material.module.ts | 8 ++++ .../src/app/modules/home/home.component.html | 9 ++++ .../src/app/modules/home/home.component.scss | 5 ++ .../src/app/modules/home/home.module.ts | 3 +- project/application/src/styles.scss | 1 + project/application/webpack.server.config.js | 8 +++- 10 files changed, 97 insertions(+), 10 deletions(-) create mode 100644 project/application/src/app/modules/custom-material/custom-material.module.ts diff --git a/project/application/angular.json b/project/application/angular.json index 1342f99..951e6ac 100644 --- a/project/application/angular.json +++ b/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"] } }, diff --git a/project/application/package-lock.json b/project/application/package-lock.json index a144a85..8341d6a 100644 --- a/project/application/package-lock.json +++ b/project/application/package-lock.json @@ -123,13 +123,21 @@ } }, "@angular/animations": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.1.2.tgz", - "integrity": "sha512-E6eFwoRSKKEGPDsIF5AnecDid3ZoOczG5WUTpOYIGUfKtB1kqiisZCP/090RWN48xU3nDssxwPiN9dJ7a4Hf4w==", + "version": "6.1.3", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.1.3.tgz", + "integrity": "sha512-uLKq+bdfo+/jLW/C6lkUVsB7m+e8j18MjZGHlphI07jW6KvutX+AXdPUI/RMkkWRjZp11aF727PAQ6y3DyqB+Q==", "requires": { "tslib": "^1.9.0" } }, + "@angular/cdk": { + "version": "6.4.6", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.4.6.tgz", + "integrity": "sha512-XKSoeSP4htpOq2UIyF9KDhIJtEQ3wyhZRjDxyRSNmJ9OsuRZxJAGCAzOX5RpMszOyFZgUNVycOi+1lHDe0JrZg==", + "requires": { + "tslib": "^1.7.1" + } + }, "@angular/cli": { "version": "6.1.3", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.1.3.tgz", @@ -356,6 +364,23 @@ "integrity": "sha512-2E51UWvdhI2Zqe+3D0E9H/GUTdSUd4DMOQufpFnw2hpXJEr60zbccsVHNfKUGrvDl0wZcTWqho/vvEuKdKNCDA==", "dev": true }, + "@angular/material": { + "version": "6.4.6", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.4.6.tgz", + "integrity": "sha512-SUSg9MhLv4IZj6Nh8qoCLDImZugCQ+Jvvt+/cDIaTn6TrT6ZenDHc6jOhbGFesU6FuBDBFIXMiuBPD9kBr7vaA==", + "requires": { + "parse5": "^5.0.0", + "tslib": "^1.7.1" + }, + "dependencies": { + "parse5": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz", + "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==", + "optional": true + } + } + }, "@angular/platform-browser": { "version": "6.1.2", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.1.2.tgz", @@ -4972,6 +4997,11 @@ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=" }, + "hammerjs": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz", + "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=" + }, "handle-thing": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz", @@ -7275,6 +7305,11 @@ "object-visit": "^1.0.0" } }, + "material-design-icons": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz", + "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78=" + }, "math-random": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.1.tgz", @@ -12024,6 +12059,11 @@ "lodash": "^4.17.5" } }, + "webpack-node-externals": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/webpack-node-externals/-/webpack-node-externals-1.7.2.tgz", + "integrity": "sha512-ajerHZ+BJKeCLviLUUmnyd5B4RavLF76uv3cs6KNuO8W+HuQaEs0y0L7o40NQxdPy5w0pcv8Ew7yPUAQG0UdCg==" + }, "webpack-sources": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.1.0.tgz", diff --git a/project/application/package.json b/project/application/package.json index 35d2962..120da18 100644 --- a/project/application/package.json +++ b/project/application/package.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": { diff --git a/project/application/src/app/modules/core/core.module.ts b/project/application/src/app/modules/core/core.module.ts index f20332f..9bbc3fe 100644 --- a/project/application/src/app/modules/core/core.module.ts +++ b/project/application/src/app/modules/core/core.module.ts @@ -1,5 +1,6 @@ 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'; @@ -7,6 +8,7 @@ import { RoutingModule } from '../routing/routing.module'; imports: [ BrowserModule.withServerTransition({ appId: 'angular-universal' }), BrowserTransferStateModule, + BrowserAnimationsModule, RoutingModule, ], }) diff --git a/project/application/src/app/modules/custom-material/custom-material.module.ts b/project/application/src/app/modules/custom-material/custom-material.module.ts new file mode 100644 index 0000000..a372848 --- /dev/null +++ b/project/application/src/app/modules/custom-material/custom-material.module.ts @@ -0,0 +1,8 @@ +import { NgModule } from '@angular/core'; +import { MatButtonModule } from '@angular/material'; + +@NgModule({ + imports: [MatButtonModule], + exports: [MatButtonModule], +}) +export class CustomMaterialModule {} diff --git a/project/application/src/app/modules/home/home.component.html b/project/application/src/app/modules/home/home.component.html index b651552..7be92dc 100644 --- a/project/application/src/app/modules/home/home.component.html +++ b/project/application/src/app/modules/home/home.component.html @@ -1 +1,10 @@

{{ title }}

+ +
+ + + + + + Link +
diff --git a/project/application/src/app/modules/home/home.component.scss b/project/application/src/app/modules/home/home.component.scss index e69de29..8554736 100644 --- a/project/application/src/app/modules/home/home.component.scss +++ b/project/application/src/app/modules/home/home.component.scss @@ -0,0 +1,5 @@ +.button-row { + button, a { + margin-right: 8px; + } +} diff --git a/project/application/src/app/modules/home/home.module.ts b/project/application/src/app/modules/home/home.module.ts index 4ad471b..227d64f 100644 --- a/project/application/src/app/modules/home/home.module.ts +++ b/project/application/src/app/modules/home/home.module.ts @@ -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 {} diff --git a/project/application/src/styles.scss b/project/application/src/styles.scss index e69de29..4455d92 100644 --- a/project/application/src/styles.scss +++ b/project/application/src/styles.scss @@ -0,0 +1 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; diff --git a/project/application/webpack.server.config.js b/project/application/webpack.server.config.js index 3417e54..fd04e9e 100644 --- a/project/application/webpack.server.config.js +++ b/project/application/webpack.server.config.js @@ -1,5 +1,6 @@ const path = require('path'); const webpack = require('webpack'); +const nodeExternals = require('webpack-node-externals'); module.exports = { entry: { server: './server.ts' }, @@ -7,7 +8,12 @@ module.exports = { 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',