fix(bazel): Make sure only single copy of `@angular/bazel` is installed (#30072)

When `ng add` is invoked independently of `ng new`, a node installation
of `@angular/bazel` is performed by the CLI before invoking the
schematic. This step appends `@angular/bazel` to the `dependencies`
section of `package.json`. The schematics then appends the same package
to `devDependencies`.

This leads to the warning:

```
warning package.json: "dependencies" has dependency "@angular/bazel" with
range "^8.0.0-beta.13" that collides with a dependency in "devDependencies"
of the same name with version "~8.0.0-beta.12"
```

PR Close #30072

packages/bazel/src/schematics/ng-add/index.ts

@@ -55,13 +55,19 @@ function addDevDependenciesToPackageJson(options: Schema) {
     };
 
     const recorder = host.beginUpdate(packageJson);
-    const depsToInstall = Object.keys(devDependencies).filter((name) => {
+    for (const packageName of Object.keys(devDependencies)) {
-      return !findPropertyInAstObject(devDeps, name);
+      const existingDep = findPropertyInAstObject(deps, packageName);
-    });
+      if (existingDep) {
-    for (const packageName of depsToInstall) {
+        const content = packageJsonContent.toString();
+        removeKeyValueInAstObject(recorder, content, deps, packageName);
+      }
       const version = devDependencies[packageName];
       const indent = 4;
-      insertPropertyInAstObjectInOrder(recorder, devDeps, packageName, version, indent);
+      if (findPropertyInAstObject(devDeps, packageName)) {
+        replacePropertyInAstObject(recorder, devDeps, packageName, version, indent);
+      } else {
+        insertPropertyInAstObjectInOrder(recorder, devDeps, packageName, version, indent);
+      }
     }
     host.commitUpdate(recorder);
     return host;

packages/bazel/src/schematics/ng-add/index_spec.ts

@@ -100,7 +100,7 @@ describe('ng-add schematic', () => {
     expect(devDeps).toContain('@bazel/karma');
   });
 
-  it('should not add an existing dev dependency', () => {
+  it('should replace an existing dev dependency', () => {
     expect(host.files).toContain('/package.json');
     const packageJson = JSON.parse(host.readContent('/package.json'));
     packageJson.devDependencies['@angular/bazel'] = '4.2.42';
@@ -110,7 +110,20 @@ describe('ng-add schematic', () => {
     // It is possible that a dep gets added twice if the package already exists.
     expect(content.match(/@angular\/bazel/g) !.length).toEqual(1);
     const json = JSON.parse(content);
-    expect(json.devDependencies['@angular/bazel']).toBe('4.2.42');
+    expect(json.devDependencies['@angular/bazel']).toBe('1.2.3');
+  });
+
+  it('should remove an existing dependency', () => {
+    expect(host.files).toContain('/package.json');
+    const packageJson = JSON.parse(host.readContent('/package.json'));
+    packageJson.dependencies['@angular/bazel'] = '4.2.42';
+    expect(Object.keys(packageJson.dependencies)).toContain('@angular/bazel');
+    host.overwrite('/package.json', JSON.stringify(packageJson));
+    host = schematicRunner.runSchematic('ng-add', defaultOptions, host);
+    const content = host.readContent('/package.json');
+    const json = JSON.parse(content);
+    expect(Object.keys(json.dependencies)).not.toContain('@angular/bazel');
+    expect(json.devDependencies['@angular/bazel']).toBe('1.2.3');
   });
 
   it('should not create Bazel workspace file', () => {

packages/bazel/src/schematics/utility/json-utils.ts

@@ -40,7 +40,7 @@ export function removeKeyValueInAstObject(
       const start = prop.start.offset;
       const end = prop.end.offset;
       let length = end - start;
-      const match = content.slice(end).match(/[,\s]+/);
+      const match = content.slice(end).match(/^[,\s]+/);
       if (match) {
         length += match.pop() !.length;
       }