Skip to content

Commit

Permalink
feat(material/schematics): add option not to include animations modul…
Browse files Browse the repository at this point in the history
…e in ng-add (angular#22559)

Adds a third option to the `ng-add` schematic that allows users to opt out of including any of the animations modules.
  • Loading branch information
crisbeto authored Feb 26, 2022
1 parent 5fc655b commit 38334d6
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 17 deletions.
16 changes: 15 additions & 1 deletion src/material/schematics/ng-add/index.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down Expand Up @@ -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) {
Expand Down
16 changes: 12 additions & 4 deletions src/material/schematics/ng-add/schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": []
Expand Down
4 changes: 2 additions & 2 deletions src/material/schematics/ng-add/schema.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
22 changes: 12 additions & 10 deletions src/material/schematics/ng-add/setup-project.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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(
Expand Down

0 comments on commit 38334d6

Please sign in to comment.