fix(ng-add): inserted dependencies should be sorted (#12847)

In case someone runs `ng add @angular/material`, all required dependencies are just inserted at the end of the `dependencies` object. We should sort the dependencies after adding dependencies.

Author: devversion

src/lib/schematics/install/index.spec.ts

@@ -30,13 +30,17 @@ describe('material-install-schematic', () => {
   it('should update package.json', () => {
     const tree = runner.runSchematic('ng-add', {}, appTree);
     const packageJson = JSON.parse(getFileContent(tree, '/package.json'));
-    const angularCoreVersion = packageJson.dependencies['@angular/core'];
+    const dependencies = packageJson.dependencies;
+    const angularCoreVersion = dependencies['@angular/core'];
 
-    expect(packageJson.dependencies['@angular/material']).toBeDefined();
-    expect(packageJson.dependencies['@angular/cdk']).toBeDefined();
-    expect(packageJson.dependencies['hammerjs']).toBeDefined();
-    expect(packageJson.dependencies['@angular/animations']).toBe(angularCoreVersion,
+    expect(dependencies['@angular/material']).toBeDefined();
+    expect(dependencies['@angular/cdk']).toBeDefined();
+    expect(dependencies['hammerjs']).toBeDefined();
+    expect(dependencies['@angular/animations']).toBe(angularCoreVersion,
       'Expected the @angular/animations package to have the same version as @angular/core.');
+
+    expect(Object.keys(dependencies)).toEqual(Object.keys(dependencies).sort(),
+        'Expected the modified "dependencies" to be sorted alphabetically.');
   });
 
   it('should add hammerjs import to project main file', () => {

src/lib/schematics/install/index.ts

@@ -57,13 +57,13 @@ function addMaterialToPackageJson(options: Schema) {
     // have the same version tag if possible.
     const ngCoreVersionTag = getPackageVersionFromPackageJson(host, '@angular/core');
 
-    addPackageToPackageJson(host, 'dependencies', '@angular/cdk', `^${materialVersion}`);
-    addPackageToPackageJson(host, 'dependencies', '@angular/material', `^${materialVersion}`);
-    addPackageToPackageJson(host, 'dependencies', '@angular/animations',
+    addPackageToPackageJson(host, '@angular/cdk', `^${materialVersion}`);
+    addPackageToPackageJson(host, '@angular/material', `^${materialVersion}`);
+    addPackageToPackageJson(host, '@angular/animations',
         ngCoreVersionTag || requiredAngularVersionRange);
 
     if (options.gestures) {
-      addPackageToPackageJson(host, 'dependencies', 'hammerjs', hammerjsVersion);
+      addPackageToPackageJson(host, 'hammerjs', hammerjsVersion);
     }
 
     context.addTask(new NodePackageInstallTask());

src/lib/schematics/utils/package-json.ts

@@ -8,19 +8,28 @@
 
 import {Tree} from '@angular-devkit/schematics';
 
+/**
+ * Sorts the keys of the given object.
+ * @returns A new object instance with sorted keys
+ */
+function sortObjectByKeys(obj: object) {
+  return Object.keys(obj).sort().reduce((result, key) => (result[key] = obj[key]) && result, {});
+}
+
 /** Adds a package to the package.json in the given host tree. */
-export function addPackageToPackageJson(host: Tree, type: string, pkg: string,
-                                        version: string): Tree {
+export function addPackageToPackageJson(host: Tree, pkg: string, version: string): Tree {
 
   if (host.exists('package.json')) {
     const sourceText = host.read('package.json')!.toString('utf-8');
     const json = JSON.parse(sourceText);
-    if (!json[type]) {
-      json[type] = {};
+
+    if (!json.dependencies) {
+      json.dependencies = {};
     }
 
-    if (!json[type][pkg]) {
-      json[type][pkg] = version;
+    if (!json.dependencies[pkg]) {
+      json.dependencies[pkg] = version;
+      json.dependencies = sortObjectByKeys(json.dependencies);
     }
 
     host.overwrite('package.json', JSON.stringify(json, null, 2));