feat(ng-add): allow using noop animations

* Currently we always install `@angular/animations` and add the `BrowserAnimationsModule` to the project module. There should be a prompt/option that allows developers to use the `NoopAnimationsModule`.

* Also no longer adds the `BrowserAnimationsModule` if the project already uses the `NoopAnimationsModule` (avoiding magic). Same applies for the `NoopAnimationsModule`. We won't add the noop animations module if the browser animations module is configured.

Author: devversion

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

@@ -27,7 +27,19 @@ describe('ng-add schematic', () => {
         `Expected "${filePath}" to be added to the project styles in the workspace.`);
   }
 
+  /** Removes the specified dependency from the /package.json in the given tree. */
+  function removePackageJsonDependency(tree: Tree, dependencyName: string) {
+    const packageContent = JSON.parse(getFileContent(tree, '/package.json'));
+    delete packageContent.dependencies[dependencyName];
+    tree.overwrite('/package.json', JSON.stringify(packageContent, null, 2));
+  }
+
   it('should update package.json', () => {
+    // By default, the Angular workspace schematic sets up "@angular/animations". In order
+    // to verify that we would set up the dependency properly if someone doesn't have the
+    // animations installed already, we remove the animations dependency explicitly. 
+    removePackageJsonDependency(appTree, '@angular/animations');
+    
     const tree = runner.runSchematic('ng-add', {}, appTree);
     const packageJson = JSON.parse(getFileContent(tree, '/package.json'));
     const dependencies = packageJson.dependencies;
@@ -142,4 +154,28 @@ describe('ng-add schematic', () => {
         'Expected the project main file to not contain a HammerJS import.');
     });
   });
+
+  describe('animations disabled', () => {
+
+    it('should not add @angular/animations to package.json', () => {
+      // By default, the Angular workspace schematic sets up "@angular/animations". In order
+      // to verify that we don't add the animations if the Animations are not installed, we need
+      // to remove the dependency for this unit test tree.
+      removePackageJsonDependency(appTree, '@angular/animations');
+
+      const tree = runner.runSchematic('ng-add', {animations: false}, appTree);
+      const packageJson = JSON.parse(getFileContent(tree, '/package.json'));
+
+      expect(packageJson.dependencies['@angular/animations'])
+        .toBeUndefined(`Expected '@angular/animations' to be not added to the package.json`);
+    });
+
+    it('should not add the BrowserAnimationsModule to the project module', () => {
+      const tree = runner.runSchematic('ng-add', {gestures: false}, appTree);
+      const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
+
+      expect(fileContent).not.toContain('BrowserAnimationsModule',
+        'Expected the project app module to not import the "BrowserAnimationsModule".');
+    });
+  });
 });

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

@@ -21,15 +21,18 @@ import {hammerjsVersion, materialVersion, requiredAngularVersionRange} from './v
  */
 export default function(options: Schema): Rule {
   return (host: Tree, context: SchematicContext) => {
-    // Version tag of the `@angular/core` dependency that has been loaded from the `package.json`
-    // 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');
-
     addPackageToPackageJson(host, '@angular/cdk', `^${materialVersion}`);
     addPackageToPackageJson(host, '@angular/material', `^${materialVersion}`);
-    addPackageToPackageJson(host, '@angular/animations',
-        ngCoreVersionTag || requiredAngularVersionRange);
+
+    if (options.animations) {
+      // Version tag of the `@angular/core` dependency that has been loaded from the `package.json`
+      // 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');
+
+      addPackageToPackageJson(host, '@angular/animations',
+          ngCoreVersionTag || requiredAngularVersionRange);
+    }
 
     if (options.gestures) {
       addPackageToPackageJson(host, 'hammerjs', hammerjsVersion);

src/lib/schematics/ng-add/schema.json

@@ -22,6 +22,12 @@
       "default": true,
       "description": "Whether gesture support should be set up or not.",
       "x-prompt": "Set up HammerJS for gesture recognition?"
+    },
+    "animations": {
+      "type": "boolean",
+      "default": true,
+      "description": "Whether animations should be set up or not.",
+      "x-prompt": "Set up animations for Angular Material?"
     }
   },
   "required": []

src/lib/schematics/ng-add/schema.ts

@@ -14,6 +14,9 @@ export interface Schema {
   /** Whether gesture support should be set up or not. */
   gestures: boolean;
 
+  /** Whether animations should be set up or not. */
+  animations: boolean;
+
   /** Name of pre-built theme to install. */
   theme: 'indigo-pink' | 'deeppurple-amber' | 'pink-bluegrey' | 'purple-green' | 'custom';
 }

src/lib/schematics/ng-add/setup-project.ts

@@ -32,16 +32,16 @@ export default function(options: Schema): Rule {
   }
 
   return chain([
+    options && options.animations ? addAnimationsModule(options) : noop(),
     options && options.gestures ? addHammerJsToMain(options) : noop(),
     addThemeToAppStyles(options),
-    addAnimationRootConfig(options),
     addFontsToIndex(options),
     addMaterialAppStyles(options),
   ]);
 }
 
-/** Add browser animation module to the app module file. */
-function addAnimationRootConfig(options: Schema) {
+/** Adds the BrowserAnimationModule to the app module of the specified project. */
+function addAnimationsModule(options: Schema) {
   return (host: Tree) => {
     const workspace = getWorkspace(host);
     const project = getProjectFromWorkspace(workspace, options.project);