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.

Author: crisbeto

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) {

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": []

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';

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(