Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 5, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 0 additions & 128 deletions src/material/schematics/ng-add/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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.')
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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';`,
);
});
});
});

Expand Down
1 change: 0 additions & 1 deletion src/material/schematics/ng-add/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
14 changes: 0 additions & 14 deletions src/material/schematics/ng-add/schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": []
Expand Down
3 changes: 0 additions & 3 deletions src/material/schematics/ng-add/schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
36 changes: 1 addition & 35 deletions src/material/schematics/ng-add/setup-project.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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) => {
Expand All @@ -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),
Expand Down Expand Up @@ -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);
}),
);
};
}
Loading