fix(material/core): remove animations from ng add (#30446)

Since we no longer depend on the animations module, we can remove the prompt and its related code from the `ng add` schematic.

Author: crisbeto

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

@@ -45,19 +45,7 @@ describe('ng-add schematic', () => {
       .toContain(filePath);
   }
 
-  /** 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')) as PackageJson;
-    delete packageContent.dependencies[dependencyName];
-    tree.overwrite('/package.json', JSON.stringify(packageContent, null, 2));
-  }
-
   it('should update package.json', async () => {
-    // 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 = await runner.runSchematic('ng-add', baseOptions, appTree);
     const packageJson = JSON.parse(getFileContent(tree, '/package.json')) as PackageJson;
     const dependencies = packageJson.dependencies;
@@ -68,11 +56,6 @@ describe('ng-add schematic', () => {
     expect(dependencies['@angular/forms'])
       .withContext('Expected the @angular/forms package to have the same version as @angular/core.')
       .toBe(angularCoreVersion);
-    expect(dependencies['@angular/animations'])
-      .withContext(
-        'Expected the @angular/animations package to have the same ' + 'version as @angular/core.',
-      )
-      .toBe(angularCoreVersion);
 
     expect(Object.keys(dependencies))
       .withContext('Expected the modified "dependencies" to be sorted alphabetically.')
@@ -185,73 +168,6 @@ describe('ng-add schematic', () => {
     );
   });
 
-  it('should add provideAnimationsAsync to the project module', async () => {
-    const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
-    const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
-
-    expect(fileContent).toContain('provideAnimationsAsync()');
-    expect(fileContent).toContain(
-      `import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';`,
-    );
-  });
-
-  it('should add the provideAnimationsAsync to a bootstrapApplication call', async () => {
-    appTree.delete('/projects/material/src/app/app.module.ts');
-    appTree.create(
-      '/projects/material/src/app/app.config.ts',
-      `
-      export const appConfig = {
-        providers: [{ provide: 'foo', useValue: 1 }]
-      };
-    `,
-    );
-    appTree.overwrite(
-      '/projects/material/src/main.ts',
-      `
-        import { bootstrapApplication } from '@angular/platform-browser';
-        import { AppComponent } from './app/app.component';
-        import { appConfig } from './app/app.config';
-
-        bootstrapApplication(AppComponent, appConfig);
-      `,
-    );
-
-    const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
-    const fileContent = getFileContent(tree, '/projects/material/src/app/app.config.ts');
-
-    expect(fileContent).toContain(
-      `import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';`,
-    );
-    expect(fileContent).toContain(`[{ provide: 'foo', useValue: 1 }, provideAnimationsAsync()]`);
-  });
-
-  it("should add the provideAnimationAsync('noop') to the project module if animations are disabled", async () => {
-    const tree = await runner.runSchematic(
-      'ng-add-setup-project',
-      {...baseOptions, animations: 'disabled'},
-      appTree,
-    );
-    const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
-
-    expect(fileContent).toContain(`provideAnimationsAsync('noop')`);
-    expect(fileContent).toContain(
-      `import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';`,
-    );
-  });
-
-  it('should not add any animations code if animations are excluded', async () => {
-    const tree = await runner.runSchematic(
-      'ng-add-setup-project',
-      {...baseOptions, animations: 'excluded'},
-      appTree,
-    );
-    const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
-
-    expect(fileContent).not.toContain('provideAnimationsAsync');
-    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) {
@@ -576,16 +492,6 @@ describe('ng-add schematic', () => {
         'body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }',
       );
     });
-
-    it('should add the provideAnimationsAsync to the project module', async () => {
-      const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
-      const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
-
-      expect(fileContent).toContain('provideAnimationsAsync()');
-      expect(fileContent).toContain(
-        `import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';`,
-      );
-    });
   });
 
   describe('using browser-esbuild builder', () => {
@@ -646,16 +552,6 @@ describe('ng-add schematic', () => {
         'body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }',
       );
     });
-
-    it('should add the provideAnimationsAsync to the project module', async () => {
-      const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
-      const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
-
-      expect(fileContent).toContain('provideAnimationsAsync()');
-      expect(fileContent).toContain(
-        `import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';`,
-      );
-    });
   });
 
   describe('using lower dependency builder', () => {
@@ -693,30 +589,6 @@ describe('ng-add schematic', () => {
 
       expectProjectStyleFile(project, '@angular/material/prebuilt-themes/azure-blue.css');
     });
-
-    it('should add material app styles', async () => {
-      const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
-      const workspace = await getWorkspace(tree);
-      const project = getProjectFromWorkspace(workspace, baseOptions.project);
-
-      const defaultStylesPath = getProjectStyleFile(project)!;
-      const htmlContent = tree.read(defaultStylesPath)!.toString();
-
-      expect(htmlContent).toContain('html, body { height: 100%; }');
-      expect(htmlContent).toContain(
-        'body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }',
-      );
-    });
-
-    it('should add the provideAnimationsAsync to the project module', async () => {
-      const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
-      const fileContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
-
-      expect(fileContent).toContain('provideAnimationsAsync()');
-      expect(fileContent).toContain(
-        `import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';`,
-      );
-    });
   });
 });
 

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

@@ -53,7 +53,6 @@ export default function (options: Schema): Rule {
       materialVersionRange || fallbackMaterialVersionRange,
     );
     addPackageToPackageJson(host, '@angular/forms', angularDependencyVersion);
-    addPackageToPackageJson(host, '@angular/animations', angularDependencyVersion);
 
     // Since the Angular Material schematics depend on the schematic utility functions from the
     // CDK, we need to install the CDK before loading the schematic files that import from the CDK.

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

@@ -44,20 +44,6 @@
       "default": false,
       "description": "Whether to set up global typography styles.",
       "x-prompt": "Set up global Angular Material typography styles?"
-    },
-    "animations": {
-      "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,9 +10,6 @@ export interface Schema {
   /** Name of the project. */
   project: string;
 
-  /** Whether the Angular browser animations module should be included and enabled. */
-  animations: 'enabled' | 'disabled' | 'excluded';
-
   /** Name of pre-built theme to install. */
   theme: 'azure-blue' | 'rose-red' | 'magenta-violet' | 'cyan-orange' | 'custom';
 

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

@@ -6,13 +6,10 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {chain, noop, Rule, SchematicContext, Tree, callRule} from '@angular-devkit/schematics';
+import {chain, Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
 import {getProjectFromWorkspace, getProjectStyleFile} from '@angular/cdk/schematics';
 import {getWorkspace} from '@schematics/angular/utility/workspace';
-import {addRootProvider} from '@schematics/angular/utility';
 import {ProjectType} from '@schematics/angular/utility/workspace-models';
-import {of as observableOf} from 'rxjs';
-import {catchError} from 'rxjs/operators';
 import {addFontsToIndex} from './fonts/material-fonts';
 import {Schema} from './schema';
 import {addThemeToAppStyles, addTypographyClass} from './theming/theming';
@@ -21,7 +18,6 @@ import {addThemeToAppStyles, addTypographyClass} from './theming/theming';
  * Scaffolds the basics of a Angular Material application, this includes:
  *  - Add Packages to package.json
  *  - Adds pre-built themes to styles.ext
- *  - Adds Browser Animation to app.module
  */
 export default function (options: Schema): Rule {
   return async (host: Tree, context: SchematicContext) => {
@@ -30,7 +26,6 @@ export default function (options: Schema): Rule {
 
     if (project.extensions['projectType'] === ProjectType.Application) {
       return chain([
-        addAnimations(options),
         addThemeToAppStyles(options),
         addFontsToIndex(options),
         addMaterialAppStyles(options),
@@ -91,32 +86,3 @@ function addMaterialAppStyles(options: Schema) {
     host.commitUpdate(recorder);
   };
 }
-
-/** Adds the animations package to the project based on the conffiguration. */
-function addAnimations(options: Schema): Rule {
-  return (host: Tree, context: SchematicContext) => {
-    const animationsRule =
-      options.animations === 'excluded'
-        ? noop()
-        : addRootProvider(options.project, ({code, external}) => {
-            return code`${external(
-              'provideAnimationsAsync',
-              '@angular/platform-browser/animations/async',
-            )}(${options.animations === 'disabled' ? `'noop'` : ''})`;
-          });
-
-    // The `addRootProvider` rule can throw in some custom scenarios (see #28640).
-    // Add some error handling around it so the setup isn't interrupted.
-    return callRule(animationsRule, host, context).pipe(
-      catchError(() => {
-        context.logger.error(
-          'Failed to add animations to project. Continuing with the Angular Material setup.',
-        );
-        context.logger.info(
-          'Read more about setting up the animations manually: https://angular.dev/guide/animations',
-        );
-        return observableOf(host);
-      }),
-    );
-  };
-}