fix: ɵɵdomElement* / ɵɵdomListener instructions missing

Author: Brooooooklyn

crates/oxc_angular_compiler/src/component/decorator.rs

@@ -114,6 +114,7 @@ pub fn extract_component_metadata<'a>(
                     // Only override the implicit value if an explicit boolean is provided
                     if let Some(value) = extract_boolean_value(&prop.value) {
                         metadata.standalone = value;
+                        metadata.standalone_explicitly_set = true;
                     }
                 }
                 "encapsulation" => {

crates/oxc_angular_compiler/src/component/metadata.rs

@@ -115,6 +115,17 @@ pub struct ComponentMetadata<'a> {
     /// Whether this is a standalone component.
     pub standalone: bool,
 
+    /// Whether `standalone` was explicitly set in the decorator.
+    ///
+    /// When `false`, `standalone` was inherited from the implicit default (Angular v19+
+    /// defaults to `true`). This distinction matters for DomOnly mode: only components
+    /// with an explicit `standalone: true` should use DomOnly mode, because implicit
+    /// standalone components may be declared in NgModules (which OXC can't detect in
+    /// single-file compilation).
+    ///
+    /// See: angular/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts:1326-1339
+    pub standalone_explicitly_set: bool,
+
     /// View encapsulation mode.
     pub encapsulation: ViewEncapsulation,
 
@@ -518,6 +529,7 @@ impl<'a> ComponentMetadata<'a> {
             styles: Vec::new_in(allocator),
             style_urls: Vec::new_in(allocator),
             standalone: implicit_standalone,
+            standalone_explicitly_set: false,
             encapsulation: ViewEncapsulation::default(),
             change_detection: ChangeDetectionStrategy::default(),
             host: None,

crates/oxc_angular_compiler/src/component/transform.rs

@@ -1364,7 +1364,20 @@ fn compile_component_full<'a>(
     // rather than relying solely on the external use_dom_only_mode flag.
     // The metadata has standalone (from decorator) and has_directive_dependencies
     // (from analyzing the imports array).
-    let mode = if metadata.standalone && !metadata.has_directive_dependencies {
+    //
+    // IMPORTANT: We only use DomOnly mode when `standalone: true` was EXPLICITLY
+    // set in the decorator. When standalone is implicitly defaulted (Angular v19+),
+    // we conservatively use Full mode because:
+    // 1. The component may be declared in an NgModule (OXC can't detect this)
+    // 2. Angular's ngtsc in local compilation mode always sets
+    //    hasDirectiveDependencies=true for safety
+    // 3. Angular's ngtsc in global mode sets hasDirectiveDependencies=!isStandalone||...
+    //    meaning non-standalone components ALWAYS use Full mode
+    // See: angular/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts:1326-1339
+    let mode = if metadata.standalone
+        && metadata.standalone_explicitly_set
+        && !metadata.has_directive_dependencies
+    {
         TemplateCompilationMode::DomOnly
     } else {
         TemplateCompilationMode::Full

crates/oxc_angular_compiler/tests/integration_test.rs

@@ -5,7 +5,7 @@
 
 use oxc_allocator::Allocator;
 use oxc_angular_compiler::{
-    ResolvedResources, TransformOptions as ComponentTransformOptions,
+    AngularVersion, ResolvedResources, TransformOptions as ComponentTransformOptions,
     output::ast::FunctionExpr,
     output::emitter::JsEmitter,
     parser::html::HtmlParser,
@@ -3325,6 +3325,95 @@ fn test_animation_in_for_with_listener_variable_naming() {
     insta::assert_snapshot!("animation_in_for_with_listener", js);
 }
 
+/// Test that implicit standalone components (no `standalone` in decorator) use Full mode.
+///
+/// Angular 19+ defaults `standalone` to `true` when not specified. However, OXC performs
+/// single-file compilation without NgModule context. Angular's ngtsc (in local compilation
+/// mode) always sets `hasDirectiveDependencies = true` because it can't fully inspect
+/// dependencies. OXC should do the same: only use DomOnly mode when `standalone: true`
+/// is EXPLICITLY set in the decorator.
+///
+/// Components that rely on the implicit default may be declared in NgModules, which
+/// Angular's global compilation handles by setting `hasDirectiveDependencies =
+/// !isStandalone || ...`. Without NgModule context, OXC must be conservative.
+///
+/// See: angular/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts:1326-1339
+#[test]
+fn test_dom_only_mode_not_used_for_implicit_standalone() {
+    let allocator = Allocator::default();
+    let source = r"
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-test',
+  template: `
+    <div>Hello</div>
+    <span>World</span>
+  `
+})
+export class TestComponent {}
+";
+
+    // Angular version 19+ defaults standalone to true, but implicit standalone
+    // should NOT trigger DomOnly mode because the component might be in an NgModule
+    let options = ComponentTransformOptions {
+        use_dom_only_mode: true,
+        angular_version: Some(AngularVersion::new(21, 0, 0)),
+        ..Default::default()
+    };
+    let result = transform_angular_file(&allocator, "test.ts", source, &options, None);
+
+    // Should use Full mode (elementStart), NOT DomOnly (domElementStart)
+    assert!(
+        result.code.contains("ɵɵelementStart"),
+        "Implicit standalone component should use ɵɵelementStart (Full mode). Output:\n{}",
+        result.code
+    );
+    assert!(
+        !result.code.contains("ɵɵdomElementStart"),
+        "Implicit standalone component should NOT use ɵɵdomElementStart (DomOnly). Output:\n{}",
+        result.code
+    );
+}
+
+/// Test that implicit standalone components with empty imports also use Full mode.
+///
+/// Even with an empty `imports: []` array, if `standalone` is not explicitly set,
+/// OXC should use Full mode to be safe.
+#[test]
+fn test_dom_only_mode_not_used_for_implicit_standalone_with_empty_imports() {
+    let allocator = Allocator::default();
+    let source = r"
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-test',
+  imports: [],
+  template: `<div>Hello</div>`
+})
+export class TestComponent {}
+";
+
+    let options = ComponentTransformOptions {
+        use_dom_only_mode: true,
+        angular_version: Some(AngularVersion::new(21, 0, 0)),
+        ..Default::default()
+    };
+    let result = transform_angular_file(&allocator, "test.ts", source, &options, None);
+
+    // Implicit standalone + empty imports should still use Full mode
+    assert!(
+        result.code.contains("ɵɵelementStart"),
+        "Implicit standalone with empty imports should use Full mode. Output:\n{}",
+        result.code
+    );
+    assert!(
+        !result.code.contains("ɵɵdomElementStart"),
+        "Implicit standalone with empty imports should NOT use DomOnly. Output:\n{}",
+        result.code
+    );
+}
+
 /// Test that standalone components with empty imports use DomOnly mode.
 #[test]
 fn test_dom_only_mode_used_for_standalone_with_empty_imports() {

crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_inline_styles.snap

@@ -2,7 +2,6 @@
 source: crates/oxc_angular_compiler/tests/integration_test.rs
 expression: result.code
 ---
-
 import { Component } from '@angular/core';
 import * as i0 from '@angular/core';
 
@@ -14,9 +13,9 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:StyledComponent,select
     decls:2,vars:0,consts:[[1,"container"]],template:function StyledComponent_Template(rf,
         ctx) {
       if ((rf & 1)) {
-        i0.ɵɵdomElementStart(0,"div",0);
+        i0.ɵɵelementStart(0,"div",0);
         i0.ɵɵtext(1,"Hello");
-        i0.ɵɵdomElementEnd();
+        i0.ɵɵelementEnd();
       }
     },styles:[".container[_ngcontent-%COMP%] { color: red; }"]});
 }

crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_multiple_styles.snap

@@ -2,7 +2,6 @@
 source: crates/oxc_angular_compiler/tests/integration_test.rs
 expression: result.code
 ---
-
 import { Component } from '@angular/core';
 import * as i0 from '@angular/core';
 
@@ -13,9 +12,9 @@ static ɵfac = function MultiStyledComponent_Factory(__ngFactoryType__) {
 static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:MultiStyledComponent,selectors:[["app-multi-styled"]],
     decls:2,vars:0,template:function MultiStyledComponent_Template(rf,ctx) {
       if ((rf & 1)) {
-        i0.ɵɵdomElementStart(0,"div");
+        i0.ɵɵelementStart(0,"div");
         i0.ɵɵtext(1,"Content");
-        i0.ɵɵdomElementEnd();
+        i0.ɵɵelementEnd();
       }
     },styles:[".first[_ngcontent-%COMP%] { color: blue; }",".second[_ngcontent-%COMP%] { background: white; }"]});
 }

crates/oxc_angular_compiler/tests/snapshots/integration_test__component_without_styles.snap

@@ -2,7 +2,6 @@
 source: crates/oxc_angular_compiler/tests/integration_test.rs
 expression: result.code
 ---
-
 import { Component } from '@angular/core';
 import * as i0 from '@angular/core';
 
@@ -13,9 +12,9 @@ static ɵfac = function NoStylesComponent_Factory(__ngFactoryType__) {
 static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:NoStylesComponent,selectors:[["app-no-styles"]],
     decls:2,vars:0,template:function NoStylesComponent_Template(rf,ctx) {
       if ((rf & 1)) {
-        i0.ɵɵdomElementStart(0,"div");
+        i0.ɵɵelementStart(0,"div");
         i0.ɵɵtext(1,"No styles");
-        i0.ɵɵdomElementEnd();
+        i0.ɵɵelementEnd();
       }
     },encapsulation:2});
 }