fix(ivy): i18n - ensure that escaped chars are handled in localized strings (#34065)

When creating synthesized tagged template literals, one must provide both
the "cooked" text and the "raw" (unparsed) text. Previously there were no
good APIs for creating the AST nodes with raw text for such literals.
Recently the APIs were improved to support this, and they do an extra
check to ensure that the raw text parses to be equal to the cooked text.

It turns out there is a bug in this check -
see https://github.com/microsoft/TypeScript/issues/35374.

This commit works around the bug by synthesizing a "head" node and morphing
it by changing its `kind` into the required node type.

// FW-1747

PR Close #34065

packages/compiler-cli/src/ngtsc/translator/src/translator.ts

@@ -552,27 +552,49 @@ export class TypeTranslatorVisitor implements ExpressionVisitor, TypeVisitor {
 function createLocalizedStringTaggedTemplate(
     ast: LocalizedString, context: Context, visitor: ExpressionVisitor) {
   let template: ts.TemplateLiteral;
+  const length = ast.messageParts.length;
   const metaBlock = ast.serializeI18nHead();
-  if (ast.messageParts.length === 1) {
+  if (length === 1) {
     template = ts.createNoSubstitutionTemplateLiteral(metaBlock.cooked, metaBlock.raw);
   } else {
+    // Create the head part
     const head = ts.createTemplateHead(metaBlock.cooked, metaBlock.raw);
     const spans: ts.TemplateSpan[] = [];
-    for (let i = 1; i < ast.messageParts.length; i++) {
+    // Create the middle parts
+    for (let i = 1; i < length - 1; i++) {
       const resolvedExpression = ast.expressions[i - 1].visitExpression(visitor, context);
       const templatePart = ast.serializeI18nTemplatePart(i);
-      const templateMiddle = ts.createTemplateMiddle(templatePart.cooked, templatePart.raw);
+      const templateMiddle = createTemplateMiddle(templatePart.cooked, templatePart.raw);
       spans.push(ts.createTemplateSpan(resolvedExpression, templateMiddle));
     }
-    if (spans.length > 0) {
-      // The last span is supposed to have a tail rather than a middle
-      spans[spans.length - 1].literal.kind = ts.SyntaxKind.TemplateTail;
-    }
+    // Create the tail part
+    const resolvedExpression = ast.expressions[length - 2].visitExpression(visitor, context);
+    const templatePart = ast.serializeI18nTemplatePart(length - 1);
+    const templateTail = createTemplateTail(templatePart.cooked, templatePart.raw);
+    spans.push(ts.createTemplateSpan(resolvedExpression, templateTail));
+    // Put it all together
     template = ts.createTemplateExpression(head, spans);
   }
   return ts.createTaggedTemplate(ts.createIdentifier('$localize'), template);
 }
 
+
+// HACK: Use this in place of `ts.createTemplateMiddle()`.
+// Revert once https://github.com/microsoft/TypeScript/issues/35374 is fixed
+function createTemplateMiddle(cooked: string, raw: string): ts.TemplateMiddle {
+  const node: ts.TemplateLiteralLikeNode = ts.createTemplateHead(cooked, raw);
+  node.kind = ts.SyntaxKind.TemplateMiddle;
+  return node as ts.TemplateMiddle;
+}
+
+// HACK: Use this in place of `ts.createTemplateTail()`.
+// Revert once https://github.com/microsoft/TypeScript/issues/35374 is fixed
+function createTemplateTail(cooked: string, raw: string): ts.TemplateTail {
+  const node: ts.TemplateLiteralLikeNode = ts.createTemplateHead(cooked, raw);
+  node.kind = ts.SyntaxKind.TemplateTail;
+  return node as ts.TemplateTail;
+}
+
 /**
  * Translate the `LocalizedString` node into a `$localize` call using the imported
  * `__makeTemplateObject` helper for ES5 formatted output.