feat(schematics): add shell schematic #9883

amcdnl · 2018-02-10T18:23:32Z

This PR adds a schematic for wiring up Angular Material and all of its dependencies in a Angular CLI application.

ghost · 2018-02-11T09:35:51Z

schematics/README.md

@@ -0,0 +1,5 @@
+# Angular Material Schematics
+A collection of Schemaatics for Angular Material.


Schemaatics -> typo

jelbourn · 2018-02-12T22:49:40Z

schematics/collection.json

-  "schematics": {}
+  "schematics": {
+    "materialShell": {
+      "description": "Create a Material shell",


Could you expand the description to something like "Adds Angular Material to an application without changing any templates"?

For the record, comments are technically not supported in JSON. ;P

The collection.json are read as JSON5; http://json5.org/

jelbourn · 2018-02-12T23:23:49Z

schematics/collection.json

@@ -1,5 +1,12 @@
 // This is the root config file where the schematics are defined.
 {
  "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
-  "schematics": {}
+  "schematics": {
+    "materialShell": {


FYI we're probably going to change this name at some point but it's still TBD

This should be ng-add.

Adding an alias for it gives this error: Error: Schematics/alias "ng-add" collides with another alias or schematic name.

jelbourn · 2018-02-12T23:24:22Z

schematics/shell/README.md

+# Material Shell
+Adds Angular Material and its depedencies and pre-configures the application. 
+
+It does the following:


You could omit the "It does the following: " ; the list by itself is good

jelbourn · 2018-02-12T23:25:33Z

schematics/shell/index.ts

+ *  - Adds pre-built themes to styles.ext
+ *  - Adds Browser Animation to app.momdule
+ */
+export default function(options: Schema): Rule {


Do you have to use a default export? These are generally strongly discouraged / banned inside Google (and these schematics will someday be used inside Google)

@hansl - All of the schematics seem to use default exports (ref: https://github.com/angular/devkit/blob/master/packages/schematics/angular/app-shell/index.ts#L313). Thoughts on @jelbourn comment?

jelbourn · 2018-02-12T23:36:59Z

schematics/shell/index.ts

+      const themeName = options && options.theme ? options.theme : 'indigo-pink';
+      const themeSrc = `../node_modules/@angular/material/prebuilt-themes/${themeName}.css`;
+      const hasCurrentTheme = app.styles.find((s: string) => s.indexOf(themeSrc) > -1);
+      const hasOtherTheme = app.styles.find((s: string) =>


Prefer breaking at the higher syntactic level:

const hasOtherTheme = app.styles.find((s: string) => s.indexOf('@angular/material/prebuilt-themes') > -1);

jelbourn · 2018-02-12T23:42:42Z

schematics/shell/index.ts

+  return (host: Tree) => {
+    const config = getConfig(host);
+    config.apps.forEach(app => {
+      const themeName = options && options.theme ? options.theme : 'indigo-pink';


What do you think about making it create a custom theme file by default? I believe that most people will want to customize the theme to one of the non-standard options, so it will be one less step when they want to swap it out.

Ya, I'll add an option for custom theme :)

@jelbourn - Custom theme requires SCSS be enabled. If they don't have this do we want to configure it for them automatically?

jelbourn · 2018-02-12T23:46:33Z

schematics/utils/lib-versions.ts

-export const angularVersion = '5.0.0';
+export const materialVersion = '^5.2.0';
+export const cdkVersion = '^5.2.0';
+export const angularVersion = '^5.0.0';


Any reason not to make this ^5.2.0?

jelbourn

Just a couple more nits

jelbourn · 2018-02-17T18:43:48Z

schematics/shell/custom-theme.ts

+// 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
+$candy-app-primary: mat-palette($mat-indigo);


Can we get the real name of the app in here instead of candy-app?

jelbourn · 2018-02-17T18:44:21Z

schematics/shell/custom-theme.ts

+
+// 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


We should add a link to the theming guide here in comments

jelbourn · 2018-02-17T18:44:50Z

schematics/shell/index.ts

+/**
+ * Add pre-built styles to style.ext file
+ */
+function addImportToStyles(options: Schema) {


addThemeToAppStyles?

jelbourn

LGTM

angular-automatic-lock-bot · 2019-09-08T09:01:24Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

feat(schematics): add shell schematic

dbd5ecc

amcdnl self-assigned this Feb 10, 2018

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Feb 10, 2018

amcdnl requested a review from jelbourn February 10, 2018 18:23

ghost reviewed Feb 11, 2018

View reviewed changes

jelbourn reviewed Feb 12, 2018

View reviewed changes

amcdnl added 2 commits February 17, 2018 11:53

chore: nit feedback

6ecdad3

feat(schematics): add ability for custom theme

1efd552

jelbourn approved these changes Feb 17, 2018

View reviewed changes

chore: nit

6ba734a

jelbourn approved these changes Feb 18, 2018

View reviewed changes

jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Feb 18, 2018

jelbourn merged commit 45399c6 into angular:master Feb 18, 2018

amcdnl deleted the shell-schematic branch February 18, 2018 21:35

tinayuangao pushed a commit that referenced this pull request Feb 20, 2018

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

1dfebf2

andrewseguin added the target: minor This PR is targeted for the next minor release label Feb 20, 2018

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(schematics): add shell schematic #9883

feat(schematics): add shell schematic #9883

amcdnl commented Feb 10, 2018

ghost Feb 11, 2018

jelbourn Feb 12, 2018

amcdnl Feb 17, 2018

hansl Feb 17, 2018

jelbourn Feb 12, 2018

hansl Feb 16, 2018

amcdnl Feb 17, 2018

jelbourn Feb 12, 2018

jelbourn Feb 12, 2018

amcdnl Feb 17, 2018

jelbourn Feb 12, 2018

jelbourn Feb 12, 2018

amcdnl Feb 17, 2018

amcdnl Feb 17, 2018

jelbourn Feb 12, 2018

jelbourn left a comment

jelbourn Feb 17, 2018

jelbourn Feb 17, 2018

jelbourn Feb 17, 2018

jelbourn left a comment

angular-automatic-lock-bot bot commented Sep 8, 2019

		@@ -0,0 +1,5 @@
		# Angular Material Schematics
		A collection of Schemaatics for Angular Material.

feat(schematics): add shell schematic #9883

feat(schematics): add shell schematic #9883

Conversation

amcdnl commented Feb 10, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jelbourn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jelbourn left a comment

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Sep 8, 2019