fix(schematics): properly indent inline files (#12317)

* Properly indents files that are being inlined through the `resolvedFiles` object that been recently introduced

Author: devversion

src/lib/schematics/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -5,14 +5,12 @@ import { FormBuilder, Validators } from '@angular/forms';
   selector: '<%= selector %>',
   <% if(inlineTemplate) { %>
   template: `
-<%= resolvedFiles.template %>
+    <%= indentTextContent(resolvedFiles.template, 4) %>
   `,<% } else { %>
   templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
-  styles: [
-    `
-<%= resolvedFiles.stylesheet %>
-    `
-  ],<% } else { %>
+  styles: [`
+    <%= indentTextContent(resolvedFiles.stylesheet, 4) %>
+  `],<% } else { %>
   styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>'],<% } %><% if(!!viewEncapsulation) { %>
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>

src/lib/schematics/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -5,14 +5,12 @@ import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
 @Component({
   selector: '<%= selector %>',<% if(inlineTemplate) { %>
   template: `
-<%= resolvedFiles.template %>
+    <%= indentTextContent(resolvedFiles.template, 4) %>
   `,<% } else { %>
   templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
-  styles: [
-    `
-<%= resolvedFiles.stylesheet %>
-    `
-  ],<% } else { %>
+  styles: [`
+    <%= indentTextContent(resolvedFiles.stylesheet, 4) %>
+  `],<% } else { %>
   styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>'],<% } %><% if(!!viewEncapsulation) { %>
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>

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

@@ -6,14 +6,12 @@ import { map } from 'rxjs/operators';
 @Component({
   selector: '<%= selector %>',<% if(inlineTemplate) { %>
   template: `
-<%= resolvedFiles.template %>
+    <%= indentTextContent(resolvedFiles.template, 4) %>
   `,<% } else { %>
   templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
-  styles: [
-    `
-<%= resolvedFiles.stylesheet %>
-    `
-  ],<% } else { %>
+  styles: [`
+    <%= indentTextContent(resolvedFiles.stylesheet, 4) %>
+  `],<% } else { %>
   styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>'],<% } %><% if(!!viewEncapsulation) { %>
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>

src/lib/schematics/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -5,7 +5,7 @@ import { <%= classify(name) %>DataSource } from './<%= dasherize(name) %>-dataso
 @Component({
   selector: '<%= selector %>',<% if(inlineTemplate) { %>
   template: `
-<%= resolvedFiles.template %>
+    <%= indentTextContent(resolvedFiles.template, 4) %>
   `,<% } else { %>
   templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
   styles: []<% } else { %>

src/lib/schematics/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -25,14 +25,12 @@ export interface FlatTreeNode {
 @Component({
   selector: '<%= selector %>',<% if (inlineTemplate) { %>
   template: `
-<%= resolvedFiles.template %>
+    <%= indentTextContent(resolvedFiles.template, 4) %>
   `,<% } else { %>
   templateUrl: './<%= dasherize(name) %>.component.html',<% } if (inlineStyle) { %>
-  styles: [
-    `
-<%= resolvedFiles.stylesheet %>
-    `
-  ],<% } else { %>
+  styles: [`
+    <%= indentTextContent(resolvedFiles.stylesheet, 4) %>
+  `],<% } else { %>
   styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>'],<% } %><% if (!!viewEncapsulation) { %>
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>

src/lib/schematics/utils/devkit-utils/README.md

@@ -1,2 +1,3 @@
 # NOTE
-This code is directly taken from [angular schematics package](https://github.com/angular/devkit/tree/master/packages/schematics/angular/utility).
+
+The base utility functions are taken from [angular schematics package](https://github.com/angular/angular-cli/tree/master/packages/schematics/angular/utility).

src/lib/schematics/utils/devkit-utils/component.ts

@@ -105,6 +105,17 @@ function buildSelector(options: any, projectPrefix: string) {
   return selector;
 }
 
+/**
+ * Indents the text content with the amount of specified spaces. The spaces will be added after
+ * every line-break. This utility function can be used inside of EJS templates to properly
+ * include the additional files.
+ */
+function indentTextContent(text: string, numSpaces: number): string {
+  // In the Material project there should be only LF line-endings, but the schematic files
+  // are not being linted and therefore there can be also use CRLF or just CR line-endings.
+  return text.replace(/(\r\n|\r|\n)/g, `$1${' '.repeat(numSpaces)}`);
+}
+
 /**
  * Rule that copies and interpolates the files that belong to this schematic context. Additionally
  * a list of file paths can be passed to this rule in order to expose them inside the EJS
@@ -113,7 +124,9 @@ function buildSelector(options: any, projectPrefix: string) {
  * This allows inlining the external template or stylesheet files in EJS without having
  * to manually duplicate the file content.
  */
-export function buildComponent(options: any, additionalFiles?: {[key: string]: string}): Rule {
+export function buildComponent(options: any,
+                               additionalFiles: {[key: string]: string} = {}): Rule {
+
   return (host: Tree, context: FileSystemSchematicContext) => {
     const workspace = getWorkspace(host);
 
@@ -166,6 +179,7 @@ export function buildComponent(options: any, additionalFiles?: {[key: string]: s
       options.inlineStyle ? filter(path => !path.endsWith('.__styleext__')) : noop(),
       options.inlineTemplate ? filter(path => !path.endsWith('.html')) : noop(),
       template({
+        indentTextContent,
         resolvedFiles,
         ...baseTemplateContext
       }),
@@ -180,3 +194,5 @@ export function buildComponent(options: any, additionalFiles?: {[key: string]: s
     ])(host, context);
   };
 }
+
+// TODO(paul): move this utility out of the `devkit-utils` because it's no longer taken from there.