fix(material): ng-add should always install matching CDK version

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

@@ -16,10 +16,12 @@ describe('CDK ng-add', () => {
     const packageJson = JSON.parse(getFileContent(tree, '/package.json'));
     const dependencies = packageJson.dependencies;
 
-    expect(dependencies['@angular/cdk']).toBeDefined();
+    expect(dependencies['@angular/cdk']).toBe('~0.0.0-PLACEHOLDER');
     expect(Object.keys(dependencies))
         .toEqual(
             Object.keys(dependencies).sort(),
             'Expected the modified "dependencies" to be sorted alphabetically.');
+    expect(runner.tasks.some(task => task.name === 'node-package')).toBe(true,
+      'Expected the package manager to be scheduled in order to update lock files.');
   });
 });

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

@@ -6,12 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Rule, Tree} from '@angular-devkit/schematics';
+import {Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
+import {NodePackageInstallTask} from '@angular-devkit/schematics/tasks';
 import {addPackageToPackageJson} from './package-config';
 
-/** Name of the Angular CDK version that is shipped together with the schematics. */
-export const cdkVersion = loadPackageVersionGracefully('@angular/cdk');
-
 /**
  * Schematic factory entry-point for the `ng-add` schematic. The ng-add schematic will be
  * automatically executed if developers run `ng add @angular/cdk`.
@@ -21,18 +19,14 @@ export const cdkVersion = loadPackageVersionGracefully('@angular/cdk');
  * this ensures that there will be no error that says that the CDK does not support `ng add`.
  */
 export default function(): Rule {
-  return (host: Tree) => {
-    // In order to align the CDK version with the other Angular dependencies, we use tilde
-    // instead of caret. This is default for Angular dependencies in new CLI projects.
-    addPackageToPackageJson(host, '@angular/cdk', `~${cdkVersion}`);
-  };
-}
+  return (host: Tree, context: SchematicContext) => {
+    // In order to align the CDK version with other Angular dependencies that are setup
+    // by "@schematics/angular", we use tilde instead of caret. This is default for Angular
+    // dependencies in new CLI projects.
+    addPackageToPackageJson(host, '@angular/cdk', `~0.0.0-PLACEHOLDER`);
 
-/** Loads the full version from the given Angular package gracefully. */
-function loadPackageVersionGracefully(packageName: string): string|null {
-  try {
-    return require(`${packageName}/package.json`).version;
-  } catch {
-    return null;
-  }
+    // Add a task to run the package manager. This is necessary because we updated the
+    // workspace "package.json" file and we want lock files to reflect the new version range.
+    context.addTask(new NodePackageInstallTask());
+  };
 }

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

@@ -57,8 +57,8 @@ describe('ng-add schematic', () => {
     const dependencies = packageJson.dependencies;
     const angularCoreVersion = dependencies['@angular/core'];
 
-    expect(dependencies['@angular/material']).toBeDefined();
-    expect(dependencies['@angular/cdk']).toBeDefined();
+    expect(dependencies['@angular/material']).toBe('~0.0.0-PLACEHOLDER');
+    expect(dependencies['@angular/cdk']).toBe('~0.0.0-PLACEHOLDER');
     expect(dependencies['@angular/forms'])
         .toBe(
             angularCoreVersion,
@@ -73,7 +73,10 @@ describe('ng-add schematic', () => {
             Object.keys(dependencies).sort(),
             'Expected the modified "dependencies" to be sorted alphabetically.');
 
-    expect(runner.tasks.some(task => task.name === 'run-schematic')).toBe(true);
+    expect(runner.tasks.some(task => task.name === 'node-package')).toBe(true,
+      'Expected the package manager to be scheduled in order to update lock files.');
+    expect(runner.tasks.some(task => task.name === 'run-schematic')).toBe(true,
+      'Expected the setup-project schematic to be scheduled.');
   });
 
   it('should add default theme', async () => {

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

@@ -27,8 +27,9 @@ export default function(options: Schema): Rule {
     const ngCoreVersionTag = getPackageVersionFromPackageJson(host, '@angular/core');
     const angularDependencyVersion = ngCoreVersionTag || requiredAngularVersionRange;
 
-    // In order to align the Material and CDK version with the other Angular dependencies,
-    // we use tilde instead of caret. This is default for Angular dependencies in new CLI projects.
+    // In order to align the Material and CDK version with other Angular dependencies that
+    // are setup by "@schematics/angular", we use tilde instead of caret. This is default for
+    // Angular dependencies in new CLI projects.
     addPackageToPackageJson(host, '@angular/cdk', `~${materialVersion}`);
     addPackageToPackageJson(host, '@angular/material', `~${materialVersion}`);
     addPackageToPackageJson(host, '@angular/forms', angularDependencyVersion);

src/material/schematics/ng-add/version-names.ts

@@ -7,21 +7,10 @@
  */
 
 /** Name of the Material version that is shipped together with the schematics. */
-export const materialVersion =
-  loadPackageVersionGracefully('@angular/cdk') ||
-  loadPackageVersionGracefully('@angular/material');
+export const materialVersion = '0.0.0-PLACEHOLDER';
 
 /**
  * Range of Angular versions that can be used together with the Angular Material version
  * that provides these schematics.
  */
 export const requiredAngularVersionRange = '0.0.0-NG';
-
-/** Loads the full version from the given Angular package gracefully. */
-function loadPackageVersionGracefully(packageName: string): string | null {
-  try {
-    return require(`${packageName}/package.json`).version;
-  } catch {
-    return null;
-  }
-}