fix(material/schematics): files with inline resources overwritten by ng-generate (#25744)

The `ng generate` MDC migration schematics was assuming that `visitTemplate` and `visitStylesheet` will be called only on external resources and it was overwriting the entire file content which was breaking files that have components with inline resources.

These changes edit the file only within the template/stylesheet span.

Author: crisbeto

src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-styles.spec.ts

@@ -1,6 +1,11 @@
 import {createTestApp, patchDevkitTreeToExposeTypeScript} from '@angular/cdk/schematics/testing';
 import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
-import {createNewTestRunner, migrateComponents, THEME_FILE} from '../test-setup-helper';
+import {
+  APP_MODULE_FILE,
+  createNewTestRunner,
+  migrateComponents,
+  THEME_FILE,
+} from '../test-setup-helper';
 
 describe('card styles', () => {
   let runner: SchematicTestRunner;
@@ -215,5 +220,31 @@ describe('card styles', () => {
       `,
       );
     });
+
+    it('should migrate inline styles', async () => {
+      const oldContent = `
+        import {Component} from '@angular/core';
+
+        @Component({
+          template: '',
+          styles: ['.mat-card { color: red; }'],
+        })
+        export class MyComp {}
+      `;
+
+      const newContent = `
+        import {Component} from '@angular/core';
+
+        @Component({
+          template: '',
+          styles: ['.mat-mdc-card { color: red; }'],
+        })
+        export class MyComp {}
+      `;
+
+      cliAppTree.overwrite(APP_MODULE_FILE, oldContent);
+      const tree = await migrateComponents(['card'], runner, cliAppTree);
+      expect(tree.readContent(APP_MODULE_FILE)).toBe(newContent);
+    });
   });
 });

src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.spec.ts

@@ -1,6 +1,11 @@
 import {createTestApp, patchDevkitTreeToExposeTypeScript} from '@angular/cdk/schematics/testing';
 import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
-import {createNewTestRunner, migrateComponents, TEMPLATE_FILE} from '../test-setup-helper';
+import {
+  APP_MODULE_FILE,
+  createNewTestRunner,
+  migrateComponents,
+  TEMPLATE_FILE,
+} from '../test-setup-helper';
 
 describe('card template migrator', () => {
   let runner: SchematicTestRunner;
@@ -110,4 +115,28 @@ describe('card template migrator', () => {
       `,
     );
   });
+
+  it('should migrate inline templates', async () => {
+    const oldContent = `
+      import {Component} from '@angular/core';
+
+      @Component({
+        template: '<mat-card></mat-card>'
+      })
+      export class MyComp {}
+    `;
+
+    const newContent = `
+      import {Component} from '@angular/core';
+
+      @Component({
+        template: '<mat-card appearance="outlined"></mat-card>'
+      })
+      export class MyComp {}
+    `;
+
+    cliAppTree.overwrite(APP_MODULE_FILE, oldContent);
+    const tree = await migrateComponents(['card'], runner, cliAppTree);
+    expect(tree.readContent(APP_MODULE_FILE)).toBe(newContent);
+  });
 });

src/material/schematics/ng-generate/mdc-migration/rules/template-migration.ts

@@ -16,7 +16,10 @@ export class TemplateMigration extends Migration<ComponentMigrator[], SchematicC
   enabled = true;
 
   override visitTemplate(template: ResolvedResource) {
-    this.fileSystem.overwrite(template.filePath, this.migrate(template.content, template.filePath));
+    this.fileSystem
+      .edit(template.filePath)
+      .remove(template.start, template.content.length)
+      .insertRight(template.start, this.migrate(template.content, template.filePath));
   }
 
   migrate(template: string, templateUrl?: string): string {

src/material/schematics/ng-generate/mdc-migration/rules/theming-styles.ts

@@ -17,7 +17,10 @@ export class ThemingStylesMigration extends Migration<ComponentMigrator[], Schem
   namespace: string;
 
   override visitStylesheet(stylesheet: ResolvedResource) {
-    this.fileSystem.overwrite(stylesheet.filePath, this.migrate(stylesheet.content));
+    this.fileSystem
+      .edit(stylesheet.filePath)
+      .remove(stylesheet.start, stylesheet.content.length)
+      .insertRight(stylesheet.start, this.migrate(stylesheet.content));
   }
 
   migrate(styles: string): string {