Schematic fixes (#10388)

* fix(schematics): better formatting on index, insert body margin 0

* fix(schematics): fix wrong mode on init

* fix(schemtic): convert == to ===

* fix(schematic): fix check expression

* chore: pr feedback

Author: amcdnl

schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html

@@ -4,7 +4,7 @@
     class="sidenav"
     fixedInViewport="true"
     [attr.role]="isHandset ? 'dialog' : 'navigation'"
-    [mode]="isHandset ? 'over' : 'side'"
+    [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
     [opened]="!(isHandset | async)!.matches">
     <mat-toolbar color="primary">Menu</mat-toolbar>
     <mat-nav-list>

schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -11,7 +11,7 @@ import { Observable } from 'rxjs/Observable';
         class="sidenav"
         fixedInViewport="true"
         [attr.role]="isHandset ? 'dialog' : 'navigation'"
-        [mode]="isHandset ? 'over' : 'side'"
+        [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
         [opened]="!(isHandset | async)!.matches">
         <mat-toolbar color="primary">Menu</mat-toolbar>
         <mat-nav-list>

schematics/shell/index.ts

@@ -9,7 +9,7 @@ import {
 import {Schema} from './schema';
 import {materialVersion, cdkVersion, angularVersion} from '../utils/lib-versions';
 import {getConfig, getAppFromConfig, AppConfig, CliConfig} from '../utils/devkit-utils/config';
-import {addModuleImportToRootModule} from '../utils/ast';
+import {addModuleImportToRootModule, getStylesPath} from '../utils/ast';
 import {addHeadLink} from '../utils/html';
 import {addPackageToPackageJson} from '../utils/package';
 import {createCustomTheme} from './custom-theme';
@@ -27,7 +27,8 @@ export default function(options: Schema): Rule {
     options && options.skipPackageJson ? noop() : addMaterialToPackageJson(options),
     addThemeToAppStyles(options),
     addAnimationRootConfig(),
-    addFontsToIndex()
+    addFontsToIndex(),
+    addBodyMarginToStyles()
   ]);
 }
 
@@ -69,15 +70,15 @@ function insertCustomTheme(app: AppConfig, host: Tree) {
   const stylesPath = normalize(`/${app.root}/styles.scss`);
 
   const buffer = host.read(stylesPath);
-  if (!buffer) {
-    throw new SchematicsException(`Could not find file for path: ${stylesPath}`);
+  if (buffer) {
+    const src = buffer.toString();
+    const insertion = new InsertChange(stylesPath, 0, createCustomTheme(app));
+    const recorder = host.beginUpdate(stylesPath);
+    recorder.insertLeft(insertion.pos, insertion.toAdd);
+    host.commitUpdate(recorder);
+  } else {
+    console.warn(`Skipped custom theme; could not find file: ${stylesPath}`);
   }
-
-  const src = buffer.toString();
-  const insertion = new InsertChange(stylesPath, 0, createCustomTheme(app));
-  const recorder = host.beginUpdate(stylesPath);
-  recorder.insertLeft(insertion.pos, insertion.toAdd);
-  host.commitUpdate(recorder);
 }
 
 /**
@@ -94,9 +95,10 @@ function insertPrebuiltTheme(app: AppConfig, host: Tree, themeName: string, conf
   }
 
   if (hasOtherTheme) {
-    throw new SchematicsException(`Another theme is already defined.`);
+    console.warn(`Skipped theme insertion; another theme is already defined.`);
+  } else {
+    host.overwrite('.angular-cli.json', JSON.stringify(config, null, 2));
   }
-  host.overwrite('.angular-cli.json', JSON.stringify(config, null, 2));
 }
 
 /**
@@ -116,9 +118,31 @@ function addAnimationRootConfig() {
 function addFontsToIndex() {
   return (host: Tree) => {
     addHeadLink(host,
-      `<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">`);
+      // tslint:disable-next-line
+      `\n<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">`);
     addHeadLink(host,
-      `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`);
+      // tslint:disable-next-line
+      `\n<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`);
     return host;
   };
 }
+
+/**
+ * Add 0 margin to body in styles.ext
+ */
+function addBodyMarginToStyles() {
+  return (host: Tree) => {
+    const stylesPath = getStylesPath(host);
+
+    const buffer = host.read(stylesPath);
+    if (buffer) {
+      const src = buffer.toString();
+      const insertion = new InsertChange(stylesPath, src.length, `\nbody { margin: 0; }\n`);
+      const recorder = host.beginUpdate(stylesPath);
+      recorder.insertLeft(insertion.pos, insertion.toAdd);
+      host.commitUpdate(recorder);
+    } else {
+      console.warn(`Skipped body reset; could not find file: ${stylesPath}`);
+    }
+  };
+}

schematics/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__-datasource.ts

@@ -61,8 +61,11 @@ export class <%= classify(name) %>DataSource extends DataSource<<%= classify(nam
       this.sort.sortChange
     ];
 
+    // Set the paginators length
+    this.paginator.length = this.data.length;
+
     return merge(...dataMutations).pipe(map(() => {
-      return this.getPagedData(this.getSortedData(this.data));
+      return this.getPagedData(this.getSortedData([...this.data]));
     }));
   }
 
@@ -91,7 +94,7 @@ export class <%= classify(name) %>DataSource extends DataSource<<%= classify(nam
     }
 
     return data.sort((a, b) => {
-      const isAsc = this.sort.direction == 'asc';
+      const isAsc = this.sort.direction === 'asc';
       switch (this.sort.active) {
         case 'name': return compare(a.name, b.name, isAsc);
         case 'id': return compare(+a.id, +b.id, isAsc);

schematics/utils/ast.ts

@@ -60,3 +60,18 @@ export function getIndexHtmlPath(host: Tree) {
   const app = getAppFromConfig(config, '0');
   return normalize(`/${app.root}/${app.index}`);
 }
+
+/**
+ * Get the root stylesheet file.
+ */
+export function getStylesPath(host: Tree) {
+  const config = getConfig(host);
+  const app = getAppFromConfig(config, '0');
+  const styles = app.styles.find(s => /styles\.(c|le|sc)ss/.test(s.toString()));
+
+  if (styles) {
+    return normalize(`/${app.root}/${styles}`);
+  } else {
+    console.warn(`Could not find global styles.ext file.`);
+  }
+}