diff --git a/src/material/schematics/ng-add/index.spec.ts b/src/material/schematics/ng-add/index.spec.ts index 803a9d243604..1b394d54831a 100644 --- a/src/material/schematics/ng-add/index.spec.ts +++ b/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';`, - ); - }); }); }); diff --git a/src/material/schematics/ng-add/index.ts b/src/material/schematics/ng-add/index.ts index 52b61f694344..3af2da35e7c8 100644 --- a/src/material/schematics/ng-add/index.ts +++ b/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. diff --git a/src/material/schematics/ng-add/schema.json b/src/material/schematics/ng-add/schema.json index 7773ae328b85..3d4fd270d9a8 100644 --- a/src/material/schematics/ng-add/schema.json +++ b/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": [] diff --git a/src/material/schematics/ng-add/schema.ts b/src/material/schematics/ng-add/schema.ts index cb87e98b43d8..01229e0f7905 100644 --- a/src/material/schematics/ng-add/schema.ts +++ b/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'; diff --git a/src/material/schematics/ng-add/setup-project.ts b/src/material/schematics/ng-add/setup-project.ts index 1919855f3b36..01cfcf22ec6e 100644 --- a/src/material/schematics/ng-add/setup-project.ts +++ b/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); - }), - ); - }; -}