fix(ng-add): do not overwrite version range specified in ng add (#18365)

* fix(ng-add): do not overwrite version range specified in `ng add`

The CLI inserts requested dependencies into the `package.json` before
`ng add` schematics run. This means that we usually do not need to insert
the dependency into `package.json` files.

Alternatively, it could happen that the `ng add` schematics run outside of
the CLI `ng add` command, or the requested dependency is dev only. In those
cases we insert a version based on the current version placeholder.

* fixup! fix(ng-add): do not overwrite version range specified in `ng add`

Address feedback

Author: devversion

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

@@ -1,6 +1,7 @@
 import {Tree} from '@angular-devkit/schematics';
 import {SchematicTestRunner} from '@angular-devkit/schematics/testing';
 import {createTestApp, getFileContent} from '../testing';
+import {addPackageToPackageJson} from './package-config';
 
 describe('CDK ng-add', () => {
   let runner: SchematicTestRunner;
@@ -22,4 +23,18 @@ describe('CDK ng-add', () => {
             Object.keys(dependencies).sort(),
             'Expected the modified "dependencies" to be sorted alphabetically.');
   });
+
+  it('should respect version range from CLI ng-add command', async () => {
+    // Simulates the behavior of the CLI `ng add` command. The command inserts the
+    // requested package version into the `package.json` before the actual schematic runs.
+    addPackageToPackageJson(appTree, '@angular/cdk', '^9.0.0');
+
+    const tree = await runner.runSchematicAsync('ng-add', {}, appTree).toPromise();
+    const packageJson = JSON.parse(getFileContent(tree, '/package.json'));
+    const dependencies = packageJson.dependencies;
+
+    expect(dependencies['@angular/cdk']).toBe('^9.0.0');
+    expect(runner.tasks.some(task => task.name === 'node-package')).toBe(false,
+      'Expected the package manager to not run since the CDK version was already inserted.');
+  });
 });

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

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Rule, Tree} from '@angular-devkit/schematics';
-import {addPackageToPackageJson} from './package-config';
+import {Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
+import {NodePackageInstallTask} from '@angular-devkit/schematics/tasks';
+import {addPackageToPackageJson, getPackageVersionFromPackageJson} from './package-config';
 
 /** Name of the Angular CDK version that is shipped together with the schematics. */
 export const cdkVersion = loadPackageVersionGracefully('@angular/cdk');
@@ -21,10 +22,22 @@ 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) => {
+    // The CLI inserts `@angular/cdk` into the `package.json` before this schematic runs. This
+    // means that we do not need to insert the CDK into `package.json` files again. In some cases
+    // though, it could happen that this schematic runs outside of the CLI `ng add` command, or
+    // the CDK is only listed as a dev dependency. If that is the case, we insert a version based
+    // on the current build version (substituted version placeholder).
+    if (getPackageVersionFromPackageJson(host, '@angular/cdk') === null) {
+      // 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`);
+
+      // 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/cdk/schematics/ng-add/package-config.ts

@@ -37,3 +37,18 @@ export function addPackageToPackageJson(host: Tree, pkg: string, version: string
 
   return host;
 }
+
+/** Gets the version of the specified package by looking at the package.json in the given tree. */
+export function getPackageVersionFromPackageJson(tree: Tree, name: string): string | null {
+  if (!tree.exists('package.json')) {
+    return null;
+  }
+
+  const packageJson = JSON.parse(tree.read('package.json')!.toString('utf8'));
+
+  if (packageJson.dependencies && packageJson.dependencies[name]) {
+    return packageJson.dependencies[name];
+  }
+
+  return null;
+}

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

@@ -10,6 +10,7 @@ import {
 } from '@angular/cdk/schematics';
 import {createTestApp, getFileContent} from '@angular/cdk/schematics/testing';
 import {getWorkspace} from '@schematics/angular/utility/config';
+import {addPackageToPackageJson} from './package-config';
 
 describe('ng-add schematic', () => {
   let runner: SchematicTestRunner;
@@ -76,6 +77,19 @@ describe('ng-add schematic', () => {
     expect(runner.tasks.some(task => task.name === 'run-schematic')).toBe(true);
   });
 
+  it('should respect version range from CLI ng-add command', async () => {
+    // Simulates the behavior of the CLI `ng add` command. The command inserts the
+    // requested package version into the `package.json` before the actual schematic runs.
+    addPackageToPackageJson(appTree, '@angular/material', '^9.0.0');
+
+    const tree = await runner.runSchematicAsync('ng-add', {}, appTree).toPromise();
+    const packageJson = JSON.parse(getFileContent(tree, '/package.json'));
+    const dependencies = packageJson.dependencies;
+
+    expect(dependencies['@angular/material']).toBe('^9.0.0');
+    expect(dependencies['@angular/cdk']).toBe('^9.0.0');
+  });
+
   it('should add default theme', async () => {
     const tree = await runner.runSchematicAsync('ng-add-setup-project', {}, appTree).toPromise();
 

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

@@ -10,7 +10,17 @@ import {Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
 import {NodePackageInstallTask, RunSchematicTask} from '@angular-devkit/schematics/tasks';
 import {addPackageToPackageJson, getPackageVersionFromPackageJson} from './package-config';
 import {Schema} from './schema';
-import {materialVersion, requiredAngularVersionRange} from './version-names';
+
+/**
+ * Version range that will be used for the Angular CDK and Angular Material if this
+ * schematic has been run outside of the CLI `ng add` command. In those cases, there
+ * can be no dependency on `@angular/material` in the `package.json` file, and we need
+ * to manually insert the dependency based on the build version placeholder.
+ *
+ * Note that the fallback version range does not use caret, but tilde because that is
+ * the default for Angular framework dependencies in CLI projects.
+ */
+const fallbackMaterialVersionRange = `~0.0.0-PLACEHOLDER`;
 
 /**
  * Schematic factory entry-point for the `ng-add` schematic. The ng-add schematic will be
@@ -25,12 +35,20 @@ export default function(options: Schema): Rule {
     // of the CLI project. This tag should be preferred because all Angular dependencies should
     // have the same version tag if possible.
     const ngCoreVersionTag = getPackageVersionFromPackageJson(host, '@angular/core');
-    const angularDependencyVersion = ngCoreVersionTag || requiredAngularVersionRange;
+    const materialVersionRange = getPackageVersionFromPackageJson(host, '@angular/material');
+    const angularDependencyVersion = ngCoreVersionTag || `0.0.0-NG`;
+
+    // The CLI inserts `@angular/material` into the `package.json` before this schematic runs.
+    // This means that we do not need to insert Angular Material into `package.json` files again.
+    // In some cases though, it could happen that this schematic runs outside of the CLI `ng add`
+    // command, or Material is only listed a dev dependency. If that is the case, we insert a
+    // version based on the current build version (substituted version placeholder).
+    if (materialVersionRange === null) {
+      addPackageToPackageJson(host, '@angular/material', fallbackMaterialVersionRange);
+    }
 
-    // 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.
-    addPackageToPackageJson(host, '@angular/cdk', `~${materialVersion}`);
-    addPackageToPackageJson(host, '@angular/material', `~${materialVersion}`);
+    addPackageToPackageJson(
+        host, '@angular/cdk', materialVersionRange || fallbackMaterialVersionRange);
     addPackageToPackageJson(host, '@angular/forms', angularDependencyVersion);
     addPackageToPackageJson(host, '@angular/animations', angularDependencyVersion);