fix(material/schematics): treat lower dependency builder as default b…

…uilder (#29833)
angular · Oct 6, 2024 · 984723e · 984723e
1 parent 02823c0
commit 984723e
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 1 deletion.
diff --git a/src/cdk/schematics/utils/project-targets.ts b/src/cdk/schematics/utils/project-targets.ts
@@ -34,7 +34,8 @@ export function getProjectBuildTargets(
     builder =>
       builder === '@angular-devkit/build-angular:application' ||
       builder === '@angular-devkit/build-angular:browser' ||
-      builder === '@angular-devkit/build-angular:browser-esbuild',
+      builder === '@angular-devkit/build-angular:browser-esbuild' ||
+      builder === '@angular/build:application',
   );
 }
 

diff --git a/src/material/schematics/ng-add/index.spec.ts b/src/material/schematics/ng-add/index.spec.ts
@@ -657,6 +657,67 @@ describe('ng-add schematic', () => {
       );
     });
   });
+
+  describe('using lower dependency builder', () => {
+    beforeEach(() => {
+      const config = {
+        version: 1,
+        projects: {
+          material: {
+            projectType: 'application',
+            root: 'projects/material',
+            sourceRoot: 'projects/material/src',
+            prefix: 'app',
+            architect: {
+              build: {
+                builder: '@angular/build:application',
+                options: {
+                  outputPath: 'dist/material',
+                  index: 'projects/material/src/index.html',
+                  browser: 'projects/material/src/main.ts',
+                  styles: ['projects/material/src/styles.css'],
+                },
+              },
+            },
+          },
+        },
+      };
+
+      appTree.overwrite('/angular.json', JSON.stringify(config, null, 2));
+    });
+
+    it('should add a theme', async () => {
+      const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
+      const workspace = await getWorkspace(tree);
+      const project = getProjectFromWorkspace(workspace, baseOptions.project);
+
+      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';`,
+      );
+    });
+  });
 });
 
 describe('ng-add schematic - library project', () => {