fix: align host bindings, .d.ts injection and SSR/linker with ngtsc (#686–#696)

crates/oxc_angular_compiler/src/component/decorator.rs

@@ -2466,7 +2466,7 @@ mod tests {
             assert_eq!(host.properties.len(), 1);
             // Keys are wrapped with brackets: "class.active" -> "[class.active]"
             assert_eq!(host.properties[0].0.as_str(), "[class.active]");
-            assert_eq!(host.properties[0].1.as_str(), "isActive");
+            assert_eq!(host.properties[0].1.as_str(), "this.isActive");
         });
     }
 
@@ -2487,7 +2487,7 @@ mod tests {
             assert_eq!(host.properties.len(), 1);
             // When no name is provided, uses the property name, wrapped in brackets
             assert_eq!(host.properties[0].0.as_str(), "[title]");
-            assert_eq!(host.properties[0].1.as_str(), "title");
+            assert_eq!(host.properties[0].1.as_str(), "this.title");
         });
     }
 
@@ -2623,7 +2623,7 @@ mod tests {
             assert_eq!(host.properties.len(), 1);
             // Keys are wrapped with brackets
             assert_eq!(host.properties[0].0.as_str(), "[style.color]");
-            assert_eq!(host.properties[0].1.as_str(), "textColor");
+            assert_eq!(host.properties[0].1.as_str(), "this.textColor");
         });
     }
 

crates/oxc_angular_compiler/src/component/definition.rs

@@ -270,9 +270,13 @@ fn generate_cmp_definition<'a>(
 
     // 13. features: [...] - component features like providers, lifecycle hooks, inheritance
     // See: packages/compiler/src/render3/view/compiler.ts:119-161
-    if let Some(features) =
-        generate_features_array(allocator, core_namespace, metadata, namespace_registry)
-    {
+    if let Some(features) = generate_features_array(
+        allocator,
+        core_namespace,
+        metadata,
+        namespace_registry,
+        options.angular_version,
+    ) {
         entries.push(LiteralMapEntry::new(Ident::from("features"), features, false));
     }
 
@@ -1000,6 +1004,7 @@ fn generate_features_array<'a>(
     core_namespace: &'a str,
     metadata: &ComponentMetadata<'a>,
     namespace_registry: &mut NamespaceRegistry<'a>,
+    angular_version: Option<crate::AngularVersion>,
 ) -> Option<OutputExpression<'a>> {
     let mut features: OxcVec<'a, OutputExpression<'a>> = OxcVec::new_in(&allocator);
 
@@ -1051,6 +1056,31 @@ fn generate_features_array<'a>(
         features.push(external_styles_feature);
     }
 
+    // 6. AnimationsFeature - v20.2.0 to v20.3.0, for a host `animate.leave`
+    // Format: ɵɵAnimationsFeature()
+    if angular_version.is_some_and(|v| v.needs_animations_feature())
+        && metadata.host.as_ref().is_some_and(|host| {
+            crate::directive::has_animate_leave_host_binding(
+                host.attributes.iter().map(|(key, _)| key.as_str()),
+                host.properties.iter().map(|(key, _)| key.as_str()),
+                host.listeners.iter().map(|(key, _)| key.as_str()),
+            )
+        })
+    {
+        let feature =
+            create_angular_fn_ref(allocator, core_namespace, Identifiers::ANIMATIONS_FEATURE);
+        features.push(OutputExpression::InvokeFunction(Box::new_in(
+            InvokeFunctionExpr {
+                fn_expr: Box::new_in(feature, &allocator),
+                args: OxcVec::new_in(&allocator),
+                pure: false,
+                optional: false,
+                source_span: None,
+            },
+            &allocator,
+        )));
+    }
+
     // Only return the array if there are features
     if features.is_empty() {
         None
@@ -1661,7 +1691,8 @@ mod tests {
         let metadata = create_test_metadata(&allocator);
         let mut namespace_registry = NamespaceRegistry::new(&allocator);
 
-        let result = generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry);
+        let result =
+            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry, None);
         assert!(result.is_none(), "Should return None when no features are needed");
     }
 
@@ -1693,7 +1724,8 @@ mod tests {
             Some(create_test_providers_array(&allocator, &["ServiceA", "ServiceB"]));
 
         let result =
-            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry).unwrap();
+            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry, None)
+                .unwrap();
 
         let emitter = JsEmitter::new();
         let js = emitter.emit_expression(&result);
@@ -1712,7 +1744,8 @@ mod tests {
         metadata.view_providers = Some(create_test_providers_array(&allocator, &["ViewService"]));
 
         let result =
-            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry).unwrap();
+            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry, None)
+                .unwrap();
 
         let emitter = JsEmitter::new();
         let js = emitter.emit_expression(&result);
@@ -1731,7 +1764,8 @@ mod tests {
         metadata.view_providers = Some(create_test_providers_array(&allocator, &["ViewService"]));
 
         let result =
-            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry).unwrap();
+            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry, None)
+                .unwrap();
 
         let emitter = JsEmitter::new();
         let js = emitter.emit_expression(&result);
@@ -1749,7 +1783,8 @@ mod tests {
         metadata.uses_inheritance = true;
 
         let result =
-            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry).unwrap();
+            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry, None)
+                .unwrap();
 
         let emitter = JsEmitter::new();
         let js = emitter.emit_expression(&result);
@@ -1767,7 +1802,8 @@ mod tests {
         metadata.lifecycle = LifecycleMetadata { uses_on_changes: true };
 
         let result =
-            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry).unwrap();
+            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry, None)
+                .unwrap();
 
         let emitter = JsEmitter::new();
         let js = emitter.emit_expression(&result);
@@ -1786,7 +1822,8 @@ mod tests {
         metadata.external_styles.push(Ident::from("./theme.css"));
 
         let result =
-            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry).unwrap();
+            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry, None)
+                .unwrap();
 
         let emitter = JsEmitter::new();
         let js = emitter.emit_expression(&result);
@@ -1806,7 +1843,8 @@ mod tests {
         metadata.host_directives.push(directive);
 
         let result =
-            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry).unwrap();
+            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry, None)
+                .unwrap();
 
         let emitter = JsEmitter::new();
         let js = emitter.emit_expression(&result);
@@ -1827,7 +1865,8 @@ mod tests {
         metadata.host_directives.push(directive);
 
         let result =
-            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry).unwrap();
+            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry, None)
+                .unwrap();
 
         let emitter = JsEmitter::new();
         let js = emitter.emit_expression(&result);
@@ -1851,7 +1890,8 @@ mod tests {
         metadata.host_directives.push(directive);
 
         let result =
-            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry).unwrap();
+            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry, None)
+                .unwrap();
 
         let emitter = JsEmitter::new();
         let js = emitter.emit_expression(&result);
@@ -1874,7 +1914,8 @@ mod tests {
         metadata.host_directives.push(directive);
 
         let result =
-            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry).unwrap();
+            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry, None)
+                .unwrap();
 
         let emitter = JsEmitter::new();
         let js = emitter.emit_expression(&result);
@@ -1907,7 +1948,8 @@ mod tests {
         metadata.host_directives.push(imported_directive);
 
         let result =
-            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry).unwrap();
+            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry, None)
+                .unwrap();
 
         let emitter = JsEmitter::new();
         let js = emitter.emit_expression(&result);
@@ -1937,7 +1979,8 @@ mod tests {
         metadata.lifecycle = LifecycleMetadata { uses_on_changes: true };
 
         let result =
-            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry).unwrap();
+            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry, None)
+                .unwrap();
 
         let emitter = JsEmitter::new();
         let js = emitter.emit_expression(&result);
@@ -2231,7 +2274,8 @@ mod tests {
         metadata.host_directives.push(directive);
 
         let result =
-            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry).unwrap();
+            generate_features_array(&allocator, "i0", &metadata, &mut namespace_registry, None)
+                .unwrap();
 
         let emitter = JsEmitter::new();
         let js = emitter.emit_expression(&result);

crates/oxc_angular_compiler/src/component/metadata.rs

@@ -105,6 +105,22 @@ impl AngularVersion {
         self.major >= 20
     }
 
+    /// Check if this version supports `ɵɵanimateEnter`/`ɵɵanimateLeave` (v20.2.0+).
+    ///
+    /// Angular v20.2 added the `animate.enter` / `animate.leave` bindings. Before
+    /// that, a host `[animate.*]` binding is a plain DOM property.
+    pub fn supports_animate_instructions(&self) -> bool {
+        self.major > 20 || (self.major == 20 && self.minor >= 2)
+    }
+
+    /// Check if `animate.leave` needs `ɵɵAnimationsFeature()` (v20.2.0 to v20.3.0).
+    ///
+    /// In those versions only that feature sets up the registry `ɵɵanimateLeave`
+    /// writes to, so the compiler adds it (`addFeatures`). v20.3.1 dropped both.
+    pub fn needs_animations_feature(&self) -> bool {
+        self.major == 20 && (self.minor == 2 || (self.minor == 3 && self.patch == 0))
+    }
+
     /// Check if this version supports the `@Service` decorator (v22.0.0+).
     ///
     /// Angular v22 introduced the `@Service` decorator as a lighter alternative to