Angular compiler alignment: 100% match rate (651/651 components)

This commit achieves full alignment between the Oxc Angular compiler and
the TypeScript Angular compiler for all 651 tested components from the
bitwarden-clients project.

Key fixes in this session (95.5% -> 100%):
- Nullish coalescing parentheses around Conditional LHS
- ngFor listener context variables (LiteralMap/LiteralArray handling)
- HTML entity encoding (UTF-8 character handling in expression lexer)
- Animation binding const index (skip animations in attribute extraction)
- Interpolated binding sanitizers (security context for interpolated properties)
- Const pool ordering (single-pass pooling matching TypeScript)
- .bind() target resolution (ThisReceiver resolves to proper context variable)
- Template literal variable resolution (local alias references)
- Context alias inlining (fixed double-counting in variable optimization)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: Brooooooklyn

crates/oxc_angular_compiler/src/ir/enums.rs

@@ -258,6 +258,8 @@ pub enum ExpressionKind {
     Typeof,
     /// Void expression (void expr).
     Void,
+    /// Template literal with resolved expressions (used after name resolution).
+    ResolvedTemplateLiteral,
 }
 
 /// Flags for semantic variables.

crates/oxc_angular_compiler/src/ir/expression.rs

@@ -174,6 +174,10 @@ pub enum IrExpression<'a> {
     /// Void expression (void expr).
     /// Used to preserve pipe bindings inside void expressions during ingest.
     Void(Box<'a, VoidExpr<'a>>),
+    /// Template literal with resolved expressions (created during name resolution).
+    /// Used when a template literal like `\`bwi ${menuItem.icon}\`` has expressions
+    /// that need to be resolved to variables in scope.
+    ResolvedTemplateLiteral(Box<'a, ResolvedTemplateLiteralExpr<'a>>),
 }
 
 impl<'a> IrExpression<'a> {
@@ -242,6 +246,8 @@ impl<'a> IrExpression<'a> {
             IrExpression::Typeof(_) => ExpressionKind::Typeof,
             // Void is a void expression
             IrExpression::Void(_) => ExpressionKind::Void,
+            // ResolvedTemplateLiteral is a template literal with resolved expressions
+            IrExpression::ResolvedTemplateLiteral(_) => ExpressionKind::ResolvedTemplateLiteral,
         }
     }
 }
@@ -705,6 +711,27 @@ impl<'a> IrExpression<'a> {
                 },
                 allocator,
             )),
+            IrExpression::ResolvedTemplateLiteral(e) => {
+                let mut elements = Vec::with_capacity_in(e.elements.len(), allocator);
+                for elem in e.elements.iter() {
+                    elements.push(IrTemplateLiteralElement {
+                        text: elem.text.clone(),
+                        source_span: elem.source_span,
+                    });
+                }
+                let mut expressions = Vec::with_capacity_in(e.expressions.len(), allocator);
+                for expr in e.expressions.iter() {
+                    expressions.push(expr.clone_in(allocator));
+                }
+                IrExpression::ResolvedTemplateLiteral(Box::new_in(
+                    ResolvedTemplateLiteralExpr {
+                        elements,
+                        expressions,
+                        source_span: e.source_span,
+                    },
+                    allocator,
+                ))
+            }
         }
     }
 }
@@ -890,6 +917,30 @@ pub struct ResolvedSafePropertyReadExpr<'a> {
     pub source_span: Option<Span>,
 }
 
+/// Template literal with resolved expressions.
+///
+/// Created during name resolution when a template literal like `\`bwi ${menuItem.icon}\``
+/// has expressions that reference variables in scope. The expressions are resolved to
+/// `ReadVariable` or `ResolvedPropertyRead` expressions.
+#[derive(Debug)]
+pub struct ResolvedTemplateLiteralExpr<'a> {
+    /// Template literal text elements (the static parts between expressions).
+    pub elements: Vec<'a, IrTemplateLiteralElement<'a>>,
+    /// Resolved expressions (the dynamic parts inside ${...}).
+    pub expressions: Vec<'a, IrExpression<'a>>,
+    /// Source span.
+    pub source_span: Option<Span>,
+}
+
+/// Template literal element (text part) for IR expressions.
+#[derive(Debug, Clone)]
+pub struct IrTemplateLiteralElement<'a> {
+    /// The text content.
+    pub text: Atom<'a>,
+    /// Source span.
+    pub source_span: Option<Span>,
+}
+
 /// Derived literal array for pure function bodies.
 /// This is used when a literal array contains non-constant entries that need
 /// to be replaced with PureFunctionParameter references.
@@ -1488,6 +1539,11 @@ pub fn transform_expressions_in_expression<'a, F>(
         IrExpression::Void(e) => {
             transform_expressions_in_expression(&mut e.expr, transform, flags);
         }
+        IrExpression::ResolvedTemplateLiteral(e) => {
+            for expr in e.expressions.iter_mut() {
+                transform_expressions_in_expression(expr, transform, flags);
+            }
+        }
         // These expressions have no internal expressions
         IrExpression::LexicalRead(_)
         | IrExpression::Reference(_)
@@ -1653,6 +1709,11 @@ pub fn visit_expressions_in_expression<'a, F>(
         IrExpression::Void(e) => {
             visit_expressions_in_expression(&e.expr, visitor, flags);
         }
+        IrExpression::ResolvedTemplateLiteral(e) => {
+            for expr in e.expressions.iter() {
+                visit_expressions_in_expression(expr, visitor, flags);
+            }
+        }
         // These expressions have no internal expressions
         IrExpression::LexicalRead(_)
         | IrExpression::Reference(_)
@@ -2644,6 +2705,11 @@ pub fn vars_used_by_ir_expression(expr: &IrExpression<'_>) -> u32 {
         // Void expression: vars used by inner expression
         IrExpression::Void(void_expr) => vars_used_by_ir_expression(&void_expr.expr),
 
+        // ResolvedTemplateLiteral: vars used by all expressions inside
+        IrExpression::ResolvedTemplateLiteral(rtl) => {
+            rtl.expressions.iter().map(vars_used_by_ir_expression).sum()
+        }
+
         // All other expressions don't directly consume variable slots
         IrExpression::LexicalRead(_)
         | IrExpression::Reference(_)

crates/oxc_angular_compiler/src/output/emitter.rs

@@ -597,7 +597,20 @@ impl JsEmitter {
             }
             OutputExpression::BinaryOperator(e) => {
                 ctx.print("(");
+                // When the operator is NullishCoalesce and the LHS is a Conditional,
+                // TypeScript requires an extra set of parentheses around the LHS.
+                // This is because TypeScript generates incorrect code if they're missing:
+                // `(a ? b : c) ?? d` must keep the parentheses.
+                // See: angular/packages/compiler/src/template/pipeline/src/phases/strip_nonrequired_parentheses.ts:91-96
+                let lhs_needs_extra_parens = matches!(e.operator, BinaryOperator::NullishCoalesce)
+                    && matches!(e.lhs.as_ref(), OutputExpression::Conditional(_));
+                if lhs_needs_extra_parens {
+                    ctx.print("(");
+                }
                 self.visit_expression(&e.lhs, ctx);
+                if lhs_needs_extra_parens {
+                    ctx.print(")");
+                }
                 ctx.print(" ");
                 ctx.print(binary_operator_to_str(e.operator));
                 ctx.print(" ");

crates/oxc_angular_compiler/src/parser/expression/lexer.rs

@@ -401,11 +401,9 @@ pub struct Lexer<'a> {
     allocator: &'a Allocator,
     /// The source text.
     input: &'a str,
-    /// The source bytes.
-    bytes: &'a [u8],
-    /// The input length.
+    /// The input length (in bytes).
     length: u32,
-    /// The current position.
+    /// The current byte position.
     index: u32,
     /// The generated tokens.
     tokens: std::vec::Vec<Token<'a>>,
@@ -417,7 +415,6 @@ impl<'a> Lexer<'a> {
         Self {
             allocator,
             input,
-            bytes: input.as_bytes(),
             length: input.len() as u32,
             index: 0,
             tokens: std::vec::Vec::new(),
@@ -434,20 +431,31 @@ impl<'a> Lexer<'a> {
     }
 
     /// Peeks at the current character.
+    /// Returns the next UTF-8 character or EOF if at end of input.
     fn peek(&self) -> char {
-        if self.index >= self.length { chars::EOF } else { self.bytes[self.index as usize] as char }
+        if self.index >= self.length {
+            chars::EOF
+        } else {
+            self.input[self.index as usize..].chars().next().unwrap_or(chars::EOF)
+        }
     }
 
     /// Peeks at a character at offset from current position.
+    /// Note: offset is in characters, not bytes. For multi-byte UTF-8 characters,
+    /// this iterates through the characters to find the one at the given offset.
     fn peek_at(&self, offset: u32) -> char {
-        let pos = self.index + offset;
-        if pos >= self.length { chars::EOF } else { self.bytes[pos as usize] as char }
+        if self.index >= self.length {
+            return chars::EOF;
+        }
+        self.input[self.index as usize..].chars().nth(offset as usize).unwrap_or(chars::EOF)
     }
 
-    /// Advances the index and returns the current character.
+    /// Advances the index by the current character's byte length and returns the character.
     fn advance(&mut self) -> char {
         let ch = self.peek();
-        self.index += 1;
+        if ch != chars::EOF {
+            self.index += ch.len_utf8() as u32;
+        }
         ch
     }
 
@@ -721,10 +729,11 @@ impl<'a> Lexer<'a> {
     /// Scans a number literal, including support for numeric separators.
     fn scan_number(&mut self, start: u32) {
         // Check if number starts with a period (e.g., .5)
-        let mut is_float = self.bytes.get(start as usize) == Some(&b'.');
+        let start_char = self.input[start as usize..].chars().next();
+        let mut is_float = start_char == Some('.');
 
         // Check for hex, octal, or binary
-        if self.bytes.get(start as usize) == Some(&b'0') {
+        if start_char == Some('0') {
             let next = self.peek();
             if next == 'x' || next == 'X' {
                 self.advance();

crates/oxc_angular_compiler/src/pipeline/emit.rs

@@ -1188,6 +1188,33 @@ fn convert_pure_function_body<'a>(
                 allocator,
             ))
         }
+
+        // ResolvedTemplateLiteral: convert to template literal with resolved expressions
+        IrExpression::ResolvedTemplateLiteral(rtl) => {
+            let mut elements = OxcVec::new_in(allocator);
+            let mut expressions = OxcVec::new_in(allocator);
+
+            for elem in rtl.elements.iter() {
+                elements.push(crate::output::ast::TemplateLiteralElement {
+                    text: elem.text.clone(),
+                    raw_text: elem.text.clone(),
+                    source_span: elem.source_span,
+                });
+            }
+
+            for expr in rtl.expressions.iter() {
+                expressions.push(convert_pure_function_body(allocator, expr, params));
+            }
+
+            OutputExpression::TemplateLiteral(Box::new_in(
+                crate::output::ast::TemplateLiteralExpr {
+                    elements,
+                    expressions,
+                    source_span: rtl.source_span,
+                },
+                allocator,
+            ))
+        }
     }
 }
 

crates/oxc_angular_compiler/src/pipeline/ingest.rs

@@ -30,8 +30,8 @@ use crate::ast::r3::{
     R3Variable, SecurityContext,
 };
 use crate::ir::enums::{
-    BindingKind, DeferOpModifierKind, DeferTriggerKind, Namespace, SemanticVariableKind,
-    TemplateKind,
+    AnimationKind, BindingKind, DeferOpModifierKind, DeferTriggerKind, Namespace,
+    SemanticVariableKind, TemplateKind,
 };
 use crate::ir::expression::{
     BinaryExpr, ConditionalCaseExpr, EmptyExpr, IrBinaryOperator, IrExpression, LexicalReadExpr,
@@ -1368,6 +1368,22 @@ fn ingest_listener_owned<'a>(
             }
         }
 
+        // Determine if this is an animation listener and extract animation phase
+        let (is_animation_listener, animation_phase) = match output.event_type {
+            ParsedEventType::Animation => (true, None),
+            ParsedEventType::LegacyAnimation => {
+                // For legacy animations, parse the phase from the output
+                // Phase can be "start" or "done"
+                let phase = output.phase.as_ref().and_then(|p| match p.as_str() {
+                    "start" => Some(AnimationKind::Enter),
+                    "done" => Some(AnimationKind::Leave),
+                    _ => None,
+                });
+                (true, phase)
+            }
+            _ => (false, None),
+        };
+
         CreateOp::Listener(ListenerOp {
             base: CreateOpBase { source_span: Some(output.source_span), ..Default::default() },
             target: element_xref,
@@ -1379,8 +1395,8 @@ fn ingest_listener_owned<'a>(
             handler_ops,
             handler_fn_name: None,
             consume_fn_name: None,
-            is_animation_listener: false,
-            animation_phase: None,
+            is_animation_listener,
+            animation_phase,
             event_target: output.target,
             consumes_dollar_event: false, // Set during resolve_dollar_event phase
         })
@@ -3442,11 +3458,12 @@ fn ingest_control_flow_insertion_point<'a, 'b>(
     let mut root: Option<RootNodeRef<'a, 'b>> = None;
 
     for child in children {
-        // Skip over comment nodes, @let declarations, and whitespace-only text nodes
-        // since it doesn't matter where they end up in the DOM.
+        // Skip over comment nodes and @let declarations since
+        // it doesn't matter where they end up in the DOM.
+        // NOTE: TypeScript does NOT skip whitespace-only text nodes here,
+        // so we must not skip them either to match the behavior.
         match child {
             R3Node::Comment(_) | R3Node::LetDeclaration(_) => continue,
-            R3Node::Text(text) if text.value.as_str().trim().is_empty() => continue,
             R3Node::Element(elem) => {
                 // We can only infer the tag name/attributes if there's a single root node.
                 if root.is_some() {

crates/oxc_angular_compiler/src/pipeline/phases/attribute_extraction.rs

@@ -101,6 +101,15 @@ fn process_view_attributes<'a>(
                     }
                 }
                 UpdateOp::Property(prop_op) => {
+                    // Skip animation bindings - they don't participate in directive matching
+                    // and are handled separately via property() instruction at runtime.
+                    if matches!(
+                        prop_op.binding_kind,
+                        BindingKind::Animation | BindingKind::LegacyAnimation
+                    ) {
+                        continue;
+                    }
+
                     // Properties also generate extracted attributes for directive matching
                     // Note: Property ops are NOT removed - they still need runtime updates
                     let extracted = ExtractedAttributeOp {
@@ -148,6 +157,15 @@ fn process_view_attributes<'a>(
                 // These are created for content projection and should be extracted if they're
                 // text attributes or have constant expressions.
                 UpdateOp::Binding(binding_op) => {
+                    // Animation bindings are NOT extractable - they're handled separately
+                    // by the property() instruction at runtime.
+                    if matches!(
+                        binding_op.kind,
+                        BindingKind::Animation | BindingKind::LegacyAnimation
+                    ) {
+                        continue;
+                    }
+
                     // Check if this binding is extractable:
                     // - Text attributes (static attributes from template) are always extractable
                     // - Non-interpolation constant expressions are also extractable