fix(material/schematics): account for browser-esbuild builder (#28025)

Fixes that the schematics would throw if the app is using the `browser-esbuild` builder from the CLI.
angular · Oct 31, 2023 · 311b8ae · 311b8ae
1 parent 4395cdf
commit 311b8ae
Show file tree

Hide file tree

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

diff --git a/src/material/schematics/ng-add/index.spec.ts b/src/material/schematics/ng-add/index.spec.ts
@@ -668,6 +668,75 @@ describe('ng-add schematic', () => {
         .toContain('BrowserAnimationsModule');
     });
   });
+
+  describe('using browser-esbuild builder', () => {
+    beforeEach(() => {
+      const config = {
+        version: 1,
+        projects: {
+          material: {
+            projectType: 'application',
+            root: 'projects/material',
+            sourceRoot: 'projects/material/src',
+            prefix: 'app',
+            architect: {
+              build: {
+                builder: '@angular-devkit/build-angular:browser-esbuild',
+                options: {
+                  outputPath: 'dist/material',
+                  index: 'projects/material/src/index.html',
+                  main: 'projects/material/src/main.ts',
+                  styles: ['projects/material/src/styles.css'],
+                },
+              },
+              test: {
+                builder: '@angular-devkit/build-angular:karma',
+                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/indigo-pink.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 BrowserAnimationsModule 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)
+        .withContext('Expected the project app module to import the "BrowserAnimationsModule".')
+        .toContain('BrowserAnimationsModule');
+    });
+  });
 });
 
 describe('ng-add schematic - library project', () => {