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

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 angular#24227 (comment)).

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,7 @@ export class ComponentResourceCollector {
     filePath: WorkspacePath,
     container: ts.ClassDeclaration | null,
   ): ResolvedResource | null {
-    const fileContent = this._fileSystem.read(filePath);
+    const fileContent = stripBom(this._fileSystem.read(filePath) || '');
 
     if (!fileContent) {
       return null;
@@ -189,7 +190,14 @@ export class ComponentResourceCollector {
       content: fileContent,
       inline: false,
       start: 0,
+      // Strip the BOM to avoid issues with the Sass compiler. See:
+      // https://github.com/angular/components/issues/24227#issuecomment-1200934258
       getCharacterAndLineOfPosition: pos => getLineAndCharacterFromPosition(lineStartsMap, pos),
     };
   }
 }
+
+/** Strips the BOM from a string. */
+function stripBom(content: string): string {
+  return content.replace(/\uFEFF/g, '');
+}