angular · crisbeto · Apr 5, 2025
diff --git a/...ases/r3_compiler_compliance/components_and_directives/value_composition/GOLDEN_PARTIAL.js b/...ases/r3_compiler_compliance/components_and_directives/value_composition/GOLDEN_PARTIAL.js
@@ -750,6 +750,7 @@ MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-
     <div>No interpolations: {{ \`hello world \` }}</div>
     <span>With interpolations: {{ \`hello \${name}, it is currently \${timeOfDay}!\` }}</span>
     <p>With pipe: {{\`hello \${name}\` | uppercase}}</p>
+    <h4>@let insideLet = \`Hello \${name}\`; Inside let: {{insideLet}}</h4>
   `, isInline: true, dependencies: [{ kind: "pipe", type: UppercasePipe, name: "uppercase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyApp, decorators: [{
             type: Component,
@@ -759,6 +760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDE
     <div>No interpolations: {{ \`hello world \` }}</div>
     <span>With interpolations: {{ \`hello \${name}, it is currently \${timeOfDay}!\` }}</span>
     <p>With pipe: {{\`hello \${name}\` | uppercase}}</p>
+    <h4>@let insideLet = \`Hello \${name}\`; Inside let: {{insideLet}}</h4>
   `,
                     imports: [UppercasePipe],
                 }]

diff --git a/...s/r3_compiler_compliance/components_and_directives/value_composition/template_literals.js b/...s/r3_compiler_compliance/components_and_directives/value_composition/template_literals.js
@@ -4,5 +4,8 @@ if (rf & 2) {
   $r3$.ɵɵadvance(2);
   $r3$.ɵɵtextInterpolate1("With interpolations: ", `hello ${ctx.name}, it is currently ${ctx.timeOfDay}!`, "");
   $r3$.ɵɵadvance(2);
-  $r3$.ɵɵtextInterpolate1("With pipe: ", $r3$.ɵɵpipeBind1(6, 3, `hello ${ctx.name}`), "");
+  $r3$.ɵɵtextInterpolate1("With pipe: ", $r3$.ɵɵpipeBind1(6, 4, `hello ${ctx.name}`), "");
+  const $insideLet_r1$ = `Hello ${ctx.name}`;
+  $r3$.ɵɵadvance(4);
+  $r3$.ɵɵtextInterpolate1(" Inside let: ", $insideLet_r1$, "");
 }
diff --git a/...s/r3_compiler_compliance/components_and_directives/value_composition/template_literals.ts b/...s/r3_compiler_compliance/components_and_directives/value_composition/template_literals.ts
@@ -13,6 +13,7 @@ export class UppercasePipe {
     <div>No interpolations: {{ \`hello world \` }}</div>
     <span>With interpolations: {{ \`hello \${name}, it is currently \${timeOfDay}!\` }}</span>
     <p>With pipe: {{\`hello \${name}\` | uppercase}}</p>
+    <h4>@let insideLet = \`Hello \${name}\`; Inside let: {{insideLet}}</h4>
   `,
   imports: [UppercasePipe],
 })

diff --git a/packages/compiler/src/output/output_ast.ts b/packages/compiler/src/output/output_ast.ts
@@ -683,23 +683,22 @@ export class TemplateLiteralExpr extends Expression {
   }
 }
 export class TemplateLiteralElementExpr extends Expression {
-  rawText: string;
+  readonly rawText: string;
 
   constructor(
-    public text: string,
+    readonly text: string,
     sourceSpan?: ParseSourceSpan | null,
     rawText?: string,
   ) {
     super(STRING_TYPE, sourceSpan);
 
-    // If `rawText` is not provided, try to extract the raw string from its
-    // associated `sourceSpan`. If that is also not available, "fake" the raw
-    // string instead by escaping the following control sequences:
+    // If `rawText` is not provided, "fake" the raw string by escaping the following sequences:
     // - "\" would otherwise indicate that the next character is a control character.
     // - "`" and "${" are template string control sequences that would otherwise prematurely
     // indicate the end of the template literal element.
-    this.rawText =
-      rawText ?? sourceSpan?.toString() ?? escapeForTemplateLiteral(escapeSlashes(text));
+    // Note that we can't rely on the `sourceSpan` here, because it may be incorrect (see
+    // https://github.com/angular/angular/pull/60267#discussion_r1986402524).
+    this.rawText = rawText ?? escapeForTemplateLiteral(escapeSlashes(text));
   }
 
   override visitExpression(visitor: ExpressionVisitor, context: any) {

diff --git a/packages/core/test/application_ref_spec.ts b/packages/core/test/application_ref_spec.ts
@@ -27,6 +27,7 @@ import {
   Type,
   ViewChild,
   ViewContainerRef,
+  Injector,
 } from '../src/core';
 import {ErrorHandler} from '../src/error_handler';
 import {ComponentRef} from '../src/linker/component_factory';