refactor(ng-generate): use .template suffix for schematic template files

src/cdk/schematics/ng-add/index.spec.ts

@@ -17,7 +17,9 @@ describe('CDK ng-add', () => {
     const dependencies = packageJson.dependencies;
 
     expect(dependencies['@angular/cdk']).toBeDefined();
-    expect(Object.keys(dependencies)).toEqual(Object.keys(dependencies).sort(),
-        'Expected the modified "dependencies" to be sorted alphabetically.');
+    expect(Object.keys(dependencies))
+        .toEqual(
+            Object.keys(dependencies).sort(),
+            'Expected the modified "dependencies" to be sorted alphabetically.');
   });
 });

src/cdk/schematics/ng-add/index.ts

@@ -29,7 +29,7 @@ export default function(): Rule {
 }
 
 /** Loads the full version from the given Angular package gracefully. */
-function loadPackageVersionGracefully(packageName: string): string | null {
+function loadPackageVersionGracefully(packageName: string): string|null {
   try {
     return require(`${packageName}/package.json`).version;
   } catch {

src/cdk/schematics/ng-generate/drag-drop/index.spec.ts

@@ -44,8 +44,11 @@ describe('CDK drag-drop schematic', () => {
 
   describe('style option', () => {
     it('should respect the option value', async () => {
-      const tree = await runner.runSchematicAsync(
-          'drag-drop', {style: 'scss', ...baseOptions}, await createTestApp(runner)).toPromise();
+      const tree =
+          await runner
+              .runSchematicAsync(
+                  'drag-drop', {style: 'scss', ...baseOptions}, await createTestApp(runner))
+              .toPromise();
 
       expect(tree.files).toContain('/projects/material/src/app/foo/foo.component.scss');
     });
@@ -68,21 +71,30 @@ describe('CDK drag-drop schematic', () => {
     });
 
     it('should not generate invalid stylesheets', async () => {
-      const tree = await runner.runSchematicAsync(
-          'drag-drop', {style: 'styl', ...baseOptions}, await createTestApp(runner)).toPromise();
+      const tree =
+          await runner
+              .runSchematicAsync(
+                  'drag-drop', {style: 'styl', ...baseOptions}, await createTestApp(runner))
+              .toPromise();
 
       // In this case we expect the schematic to generate a plain "css" file because
       // the component schematics are using CSS style templates which are not compatible
       // with all CLI supported styles (e.g. Stylus or Sass)
-      expect(tree.files).toContain('/projects/material/src/app/foo/foo.component.css',
-          'Expected the schematic to generate a plain "css" file.');
-      expect(tree.files).not.toContain('/projects/material/src/app/foo/foo.component.styl',
-        'Expected the schematic to not generate a "stylus" file');
+      expect(tree.files)
+          .toContain(
+              '/projects/material/src/app/foo/foo.component.css',
+              'Expected the schematic to generate a plain "css" file.');
+      expect(tree.files)
+          .not.toContain(
+              '/projects/material/src/app/foo/foo.component.styl',
+              'Expected the schematic to not generate a "stylus" file');
     });
 
     it('should fall back to the @schematics/angular:component option value', async () => {
-      const tree = await runner.runSchematicAsync(
-          'drag-drop', baseOptions, await createTestApp(runner, {style: 'less'})).toPromise();
+      const tree = await runner
+                       .runSchematicAsync(
+                           'drag-drop', baseOptions, await createTestApp(runner, {style: 'less'}))
+                       .toPromise();
 
       expect(tree.files).toContain('/projects/material/src/app/foo/foo.component.less');
     });
@@ -91,15 +103,19 @@ describe('CDK drag-drop schematic', () => {
   describe('inlineStyle option', () => {
     it('should respect the option value', async () => {
       const app = await createTestApp(runner);
-      const tree = await runner.runSchematicAsync(
-          'drag-drop', {inlineStyle: true, ...baseOptions}, app).toPromise();
+      const tree =
+          await runner.runSchematicAsync('drag-drop', {inlineStyle: true, ...baseOptions}, app)
+              .toPromise();
 
       expect(tree.files).not.toContain('/projects/material/src/app/foo/foo.component.css');
     });
 
     it('should fall back to the @schematics/angular:component option value', async () => {
-      const tree = await runner.runSchematicAsync(
-          'drag-drop', baseOptions, await createTestApp(runner, {inlineStyle: true})).toPromise();
+      const tree =
+          await runner
+              .runSchematicAsync(
+                  'drag-drop', baseOptions, await createTestApp(runner, {inlineStyle: true}))
+              .toPromise();
 
       expect(tree.files).not.toContain('/projects/material/src/app/foo/foo.component.css');
     });
@@ -108,8 +124,9 @@ describe('CDK drag-drop schematic', () => {
   describe('inlineTemplate option', () => {
     it('should respect the option value', async () => {
       const app = await createTestApp(runner);
-      const tree = await runner.runSchematicAsync(
-          'drag-drop', {inlineTemplate: true, ...baseOptions}, app).toPromise();
+      const tree =
+          await runner.runSchematicAsync('drag-drop', {inlineTemplate: true, ...baseOptions}, app)
+              .toPromise();
 
       expect(tree.files).not.toContain('/projects/material/src/app/foo/foo.component.html');
     });
@@ -124,8 +141,11 @@ describe('CDK drag-drop schematic', () => {
 
   describe('skipTests option', () => {
     it('should respect the option value', async () => {
-      const tree = await runner.runSchematicAsync(
-          'drag-drop', {skipTests: true, ...baseOptions}, await createTestApp(runner)).toPromise();
+      const tree =
+          await runner
+              .runSchematicAsync(
+                  'drag-drop', {skipTests: true, ...baseOptions}, await createTestApp(runner))
+              .toPromise();
 
       expect(tree.files).not.toContain('/projects/material/src/app/foo/foo.component.spec.ts');
     });
@@ -148,8 +168,10 @@ describe('CDK drag-drop schematic', () => {
     });
 
     it('should fall back to the @schematics/angular:component option value', async () => {
-      const tree = await runner.runSchematicAsync(
-          'drag-drop', baseOptions, await createTestApp(runner, {skipTests: true})).toPromise();
+      const tree = await runner
+                       .runSchematicAsync(
+                           'drag-drop', baseOptions, await createTestApp(runner, {skipTests: true}))
+                       .toPromise();
 
       expect(tree.files).not.toContain('/projects/material/src/app/foo/foo.component.spec.ts');
     });

src/cdk/schematics/ng-generate/drag-drop/index.ts

@@ -14,8 +14,9 @@ import {Schema} from './schema';
 export default function(options: Schema): Rule {
   return chain([
     buildComponent({...options}, {
-      template: './__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html',
-      stylesheet: './__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__',
+      template: './__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template',
+      stylesheet:
+          './__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template',
     }),
     options.skipImport ? noop() : addDragDropModulesToModule(options)
   ]);

src/cdk/schematics/ng-update/index.ts

@@ -46,7 +46,8 @@ export function postUpdate(): Rule {
     console.log();
     console.log(green('  ✓  Angular CDK update complete'));
     console.log();
-    console.log(yellow('  ⚠  Please check the output above for any issues that were detected ' +
-      'but could not be automatically fixed.'));
+    console.log(yellow(
+        '  ⚠  Please check the output above for any issues that were detected ' +
+        'but could not be automatically fixed.'));
   };
 }

src/cdk/schematics/utils/build-component.ts

@@ -9,6 +9,7 @@
 import {strings, template as interpolateTemplate} from '@angular-devkit/core';
 import {
   apply,
+  applyTemplates,
   branchAndMerge,
   chain,
   filter,
@@ -17,7 +18,6 @@ import {
   noop,
   Rule,
   SchematicsException,
-  template,
   Tree,
   url,
 } from '@angular-devkit/schematics';
@@ -238,12 +238,12 @@ export function buildComponent(options: ComponentOptions,
     }
 
     const templateSource = apply(url(schematicFilesUrl), [
-      options.skipTests ? filter(path => !path.endsWith('.spec.ts')) : noop(),
-      options.inlineStyle ? filter(path => !path.endsWith('.__style__')) : noop(),
-      options.inlineTemplate ? filter(path => !path.endsWith('.html')) : noop(),
+      options.skipTests ? filter(path => !path.endsWith('.spec.ts.template')) : noop(),
+      options.inlineStyle ? filter(path => !path.endsWith('.__style__.template')) : noop(),
+      options.inlineTemplate ? filter(path => !path.endsWith('.html.template')) : noop(),
       // Treat the template options as any, because the type definition for the template options
       // is made unnecessarily explicit. Every type of object can be used in the EJS template.
-      template({indentTextContent, resolvedFiles, ...baseTemplateContext} as any),
+      applyTemplates({indentTextContent, resolvedFiles, ...baseTemplateContext} as any),
       // TODO(devversion): figure out why we cannot just remove the first parameter
       // See for example: angular-cli#schematics/angular/component/index.ts#L160
       move(null as any, parsedPath.path),