From 38334d6bc85bdc7935af04c24d9e085c7bcab780 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Sat, 26 Feb 2022 17:43:11 +0100
Subject: [PATCH] feat(material/schematics): add option not to include
 animations module in ng-add (#22559)

Adds a third option to the `ng-add` schematic that allows users to opt out of including any of the animations modules.
---
 src/material/schematics/ng-add/index.spec.ts  | 16 +++++++++++++-
 src/material/schematics/ng-add/schema.json    | 16 ++++++++++----
 src/material/schematics/ng-add/schema.ts      |  4 ++--
 .../schematics/ng-add/setup-project.ts        | 22 ++++++++++---------
 4 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/src/material/schematics/ng-add/index.spec.ts b/src/material/schematics/ng-add/index.spec.ts
index 77726e937308..7d686f56609d 100644
--- a/src/material/schematics/ng-add/index.spec.ts
+++ b/src/material/schematics/ng-add/index.spec.ts
@@ -223,7 +223,7 @@ describe('ng-add schematic', () => {
   describe('animations disabled', () => {
     it('should add the NoopAnimationsModule to the project module', async () => {
       const tree = await runner
-        .runSchematicAsync('ng-add-setup-project', {animations: false}, appTree)
+        .runSchematicAsync('ng-add-setup-project', {animations: 'disabled'}, appTree)
         .toPromise();
       const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
 
@@ -253,6 +253,20 @@ describe('ng-add schematic', () => {
     });
   });
 
+  describe('animations excluded', () => {
+    it('should not add any animations code if animations are excluded', async () => {
+      const tree = await runner
+        .runSchematicAsync('ng-add-setup-project', {animations: 'excluded'}, appTree)
+        .toPromise();
+      const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
+
+      expect(fileContent).not.toContain('NoopAnimationsModule');
+      expect(fileContent).not.toContain('BrowserAnimationsModule');
+      expect(fileContent).not.toContain('@angular/platform-browser/animations');
+      expect(fileContent).not.toContain('@angular/animations');
+    });
+  });
+
   describe('custom project builders', () => {
     /** Overwrites a target builder for the workspace in the given tree */
     function overwriteTargetBuilder(tree: Tree, targetName: 'build' | 'test', newBuilder: string) {
diff --git a/src/material/schematics/ng-add/schema.json b/src/material/schematics/ng-add/schema.json
index e298bd5ff97c..f541aebe8aaa 100644
--- a/src/material/schematics/ng-add/schema.json
+++ b/src/material/schematics/ng-add/schema.json
@@ -46,10 +46,18 @@
       "x-prompt": "Set up global Angular Material typography styles?"
     },
     "animations": {
-      "type": "boolean",
-      "default": true,
-      "description": "Whether Angular browser animations should be set up.",
-      "x-prompt": "Set up browser animations for Angular Material?"
+      "type": "string",
+      "default": "enabled",
+      "description": "Whether Angular browser animations should be included.",
+      "x-prompt": {
+        "message": "Include the Angular animations module?",
+        "type": "list",
+        "items": [
+          { "value": "enabled", "label": "Include and enable animations" },
+          { "value": "disabled", "label": "Include, but disable animations" },
+          { "value": "excluded", "label": "Do not include" }
+        ]
+      }
     }
   },
   "required": []
diff --git a/src/material/schematics/ng-add/schema.ts b/src/material/schematics/ng-add/schema.ts
index 2d672aba99b1..d6da05c82ffe 100644
--- a/src/material/schematics/ng-add/schema.ts
+++ b/src/material/schematics/ng-add/schema.ts
@@ -10,8 +10,8 @@ export interface Schema {
   /** Name of the project. */
   project: string;
 
-  /** Whether Angular browser animations should be set up. */
-  animations: boolean;
+  /** Whether the Angular browser animations module should be included and enabled. */
+  animations: 'enabled' | 'disabled' | 'excluded';
 
   /** Name of pre-built theme to install. */
   theme: 'indigo-pink' | 'deeppurple-amber' | 'pink-bluegrey' | 'purple-green' | 'custom';
diff --git a/src/material/schematics/ng-add/setup-project.ts b/src/material/schematics/ng-add/setup-project.ts
index 2c489e110563..a4682650bc60 100644
--- a/src/material/schematics/ng-add/setup-project.ts
+++ b/src/material/schematics/ng-add/setup-project.ts
@@ -68,7 +68,7 @@ function addAnimationsModule(options: Schema) {
     const project = getProjectFromWorkspace(workspace, options.project);
     const appModulePath = getAppModulePath(host, getProjectMainFile(project));
 
-    if (options.animations) {
+    if (options.animations === 'enabled') {
       // In case the project explicitly uses the NoopAnimationsModule, we should print a warning
       // message that makes the user aware of the fact that we won't automatically set up
       // animations. If we would add the BrowserAnimationsModule while the NoopAnimationsModule
@@ -79,16 +79,18 @@ function addAnimationsModule(options: Schema) {
             `because "${noopAnimationsModuleName}" is already imported.`,
         );
         context.logger.info(`Please manually set up browser animations.`);
-        return;
+      } else {
+        addModuleImportToRootModule(
+          host,
+          browserAnimationsModuleName,
+          '@angular/platform-browser/animations',
+          project,
+        );
       }
-
-      addModuleImportToRootModule(
-        host,
-        browserAnimationsModuleName,
-        '@angular/platform-browser/animations',
-        project,
-      );
-    } else if (!hasNgModuleImport(host, appModulePath, browserAnimationsModuleName)) {
+    } else if (
+      options.animations === 'disabled' &&
+      !hasNgModuleImport(host, appModulePath, browserAnimationsModuleName)
+    ) {
       // Do not add the NoopAnimationsModule module if the project already explicitly uses
       // the BrowserAnimationsModule.
       addModuleImportToRootModule(