fix(cdk/schematics): strip bom from sass files (#25364)

We have some code to strip BOM from TS files when running a migration, but it doesn't apply to migrations of Sass files.

These changes reuse the same code for Sass migrations, because the BOM can cause errors in the Sass compiler (see #24227 (comment)).

(cherry picked from commit 98ebc70)

src/cdk/schematics/update-tool/component-resource-collector.ts

@@ -99,10 +99,11 @@ export class ComponentResourceCollector {
             // Need to add an offset of one to the start because the template quotes are
             // not part of the template content.
             const templateStartIdx = el.getStart() + 1;
+            const content = stripBom(el.text);
             this.resolvedStylesheets.push({
               filePath,
               container: node,
-              content: el.text,
+              content,
               inline: true,
               start: templateStartIdx,
               getCharacterAndLineOfPosition: pos =>
@@ -175,7 +176,9 @@ export class ComponentResourceCollector {
     filePath: WorkspacePath,
     container: ts.ClassDeclaration | null,
   ): ResolvedResource | null {
-    const fileContent = this._fileSystem.read(filePath);
+    // Strip the BOM to avoid issues with the Sass compiler. See:
+    // https://github.com/angular/components/issues/24227#issuecomment-1200934258
+    const fileContent = stripBom(this._fileSystem.read(filePath) || '');
 
     if (!fileContent) {
       return null;
@@ -193,3 +196,8 @@ export class ComponentResourceCollector {
     };
   }
 }
+
+/** Strips the BOM from a string. */
+function stripBom(content: string): string {
+  return content.replace(/\uFEFF/g, '');
+}