feat(schematics): add material scaffolding schematic (#9883)

schematics/README.md

@@ -0,0 +1,5 @@
+# Angular Material Schematics
+A collection of Schematics for Angular Material.
+
+## Collection
+- [Shell](shell/README.md)

schematics/collection.json

@@ -1,5 +1,13 @@
 // This is the root config file where the schematics are defined.
 {
   "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
-  "schematics": {}
+  "schematics": {
+    // Adds Angular Material to an application without changing any templates
+    "materialShell": {
+      "description": "Create a Material shell",
+      "factory": "./shell",
+      "schema": "./shell/schema.json",
+      "aliases": ["material-shell"]
+    }
+  }
 }

schematics/shell/README.md

@@ -0,0 +1,10 @@
+# Material Shell
+Adds Angular Material and its depedencies and pre-configures the application. 
+
+- Adds Material and CDK to `package.json`
+- Adds Material Icons Stylesheet to `index.html`
+- Adds Roboto Font to `index.html`
+- Ensure `BrowserAnimationsModule` is installed and included in root module
+- Adds pre-configured theme to `.angular-cli.json` file OR adds custom theme scaffolding to `styles.scss`
+
+Command: `ng generate material-shell --collection=material-schematics`

schematics/shell/custom-theme.ts

@@ -0,0 +1,37 @@
+import {AppConfig} from '../utils/devkit-utils/config';
+
+/**
+ * Create custom theme for the given application configuration.
+ */
+export function createCustomTheme(app: AppConfig) {
+  const name = app.name || 'app';
+return `
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://www.google.com/design/spec/style/color.html
+$${name}-primary: mat-palette($mat-indigo);
+$${name}-accent: mat-palette($mat-pink, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$${name}-warn: mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$${name}-theme: mat-light-theme($${name}-primary, $${name}-accent, $${name}-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($${name}-theme);
+
+`;
+}