fix: ɵɵdomElementStart — nonexistent instruction

Author: Brooooooklyn

crates/oxc_angular_compiler/src/component/decorator.rs

@@ -131,6 +131,12 @@ pub fn extract_component_metadata<'a>(
                     metadata.imports = extract_identifier_array(allocator, &prop.value);
                     // 2. The raw expression to pass to ɵɵgetComponentDepsFactory in RuntimeResolved mode
                     metadata.raw_imports = convert_oxc_expression(allocator, &prop.value);
+                    // 3. Determine if the imports array has any elements (directive dependencies).
+                    //    Angular uses: meta.isStandalone && !meta.hasDirectiveDependencies → DomOnly
+                    //    Without type info, we conservatively assume any non-empty import
+                    //    could be a directive (not just a pipe).
+                    //    See: angular/packages/compiler/src/render3/view/compiler.ts:229-232
+                    metadata.has_directive_dependencies = has_any_import_elements(&prop.value);
                 }
                 "exportAs" => {
                     // exportAs can be comma-separated: "foo, bar"
@@ -391,6 +397,26 @@ fn extract_string_array<'a>(
     Some(result)
 }
 
+/// Check if an imports expression has any elements that could be directive dependencies.
+///
+/// Returns `true` if:
+/// - The expression is a non-empty array literal (may contain directives)
+/// - The expression is not an array literal (e.g., a variable reference that could contain anything)
+///
+/// Returns `false` only for empty array literals (`imports: []`).
+///
+/// This is a conservative check: without type info, any non-empty import
+/// could be a directive. Angular's ngtsc has full type info to distinguish
+/// directives from pipes, but Oxc uses this heuristic.
+fn has_any_import_elements(expr: &Expression<'_>) -> bool {
+    match expr {
+        Expression::ArrayExpression(arr) => !arr.elements.is_empty(),
+        // Not an array literal (e.g., variable reference like `imports: MY_IMPORTS`)
+        // Conservatively assume it may contain directives
+        _ => true,
+    }
+}
+
 /// Extract an array of identifiers (for imports).
 fn extract_identifier_array<'a>(
     allocator: &'a Allocator,

crates/oxc_angular_compiler/src/component/transform.rs

@@ -1355,11 +1355,16 @@ fn compile_component_full<'a>(
     // Build ingest options from metadata and transform options
     let component_name_atom = Atom::from_in(metadata.class_name.as_str(), allocator);
 
-    // Determine compilation mode:
-    // - DomOnly is used when the component is standalone with no directive dependencies
-    // - The build tool's metadata resolver determines if DomOnly is safe
-    // - If use_dom_only_mode is true, we trust the build tool's analysis
-    let mode = if options.use_dom_only_mode {
+    // Determine compilation mode matching Angular's logic:
+    //   meta.isStandalone && !meta.hasDirectiveDependencies → DomOnly
+    //   otherwise → Full
+    // See: angular/packages/compiler/src/render3/view/compiler.ts:229-232
+    //
+    // For full component compilation, we determine this from the parsed metadata
+    // 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 {
         TemplateCompilationMode::DomOnly
     } else {
         TemplateCompilationMode::Full

crates/oxc_angular_compiler/tests/integration_test.rs

@@ -3086,3 +3086,146 @@ fn test_parenthesized_safe_navigation_keyed_access() {
         "Safe ternary should be wrapped in parentheses before keyed access. Output:\n{js}"
     );
 }
+
+/// Test that standalone components WITH directive imports use Full mode (elementStart)
+/// even when use_dom_only_mode is set to true.
+///
+/// Angular determines compilation mode from component metadata:
+///   meta.isStandalone && !meta.hasDirectiveDependencies → DomOnly
+///   otherwise → Full
+///
+/// See: angular/packages/compiler/src/render3/view/compiler.ts lines 229-232
+#[test]
+fn test_dom_only_mode_not_used_when_component_has_imports() {
+    let allocator = Allocator::default();
+    let source = r#"
+import { Component, Directive } from '@angular/core';
+
+@Directive({ selector: '[appHighlight]', standalone: true })
+export class HighlightDirective {}
+
+@Component({
+  selector: 'app-test',
+  standalone: true,
+  imports: [HighlightDirective],
+  template: `
+    <div>Hello</div>
+    @for (item of items; track item) {
+      <li>{{ item }}</li>
+    }
+  `
+})
+export class TestComponent {
+  items: string[] = [];
+}
+"#;
+
+    // Even with use_dom_only_mode: true, the compiler should detect directive dependencies
+    // from the imports array and use Full mode (elementStart, not domElementStart)
+    let options = ComponentTransformOptions { use_dom_only_mode: true, ..Default::default() };
+    let result = transform_angular_file(&allocator, "test.ts", source, &options, None);
+
+    // Should use elementStart (Full mode), NOT domElementStart (DomOnly mode)
+    assert!(
+        result.code.contains("ɵɵelementStart"),
+        "Component with imports should use ɵɵelementStart (Full mode), not domElementStart. Output:\n{}",
+        result.code
+    );
+    assert!(
+        !result.code.contains("ɵɵdomElementStart"),
+        "Component with imports should NOT use ɵɵdomElementStart. Output:\n{}",
+        result.code
+    );
+}
+
+/// Test that standalone components WITHOUT imports correctly use DomOnly mode.
+#[test]
+fn test_dom_only_mode_used_for_standalone_without_imports() {
+    let allocator = Allocator::default();
+    let source = r#"
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-test',
+  standalone: true,
+  template: `
+    <div>Hello</div>
+    <span>World</span>
+  `
+})
+export class TestComponent {}
+"#;
+
+    let options = ComponentTransformOptions { use_dom_only_mode: true, ..Default::default() };
+    let result = transform_angular_file(&allocator, "test.ts", source, &options, None);
+
+    // Should use domElementStart (DomOnly mode) for standalone with no imports
+    assert!(
+        result.code.contains("ɵɵdomElementStart"),
+        "Standalone component without imports should use ɵɵdomElementStart. Output:\n{}",
+        result.code
+    );
+    assert!(
+        !result.code.contains("ɵɵelementStart"),
+        "Standalone component without imports should NOT use ɵɵelementStart. Output:\n{}",
+        result.code
+    );
+}
+
+/// Test that non-standalone components use Full mode even with use_dom_only_mode.
+#[test]
+fn test_dom_only_mode_not_used_for_non_standalone() {
+    let allocator = Allocator::default();
+    let source = r#"
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-test',
+  standalone: false,
+  template: `<div>Hello</div>`
+})
+export class TestComponent {}
+"#;
+
+    let options = ComponentTransformOptions { use_dom_only_mode: true, ..Default::default() };
+    let result = transform_angular_file(&allocator, "test.ts", source, &options, None);
+
+    // Non-standalone should always use Full mode
+    assert!(
+        result.code.contains("ɵɵelementStart"),
+        "Non-standalone component should use ɵɵelementStart. Output:\n{}",
+        result.code
+    );
+    assert!(
+        !result.code.contains("ɵɵdomElementStart"),
+        "Non-standalone component should NOT use ɵɵdomElementStart. 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() {
+    let allocator = Allocator::default();
+    let source = r#"
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-test',
+  standalone: true,
+  imports: [],
+  template: `<div>Hello</div>`
+})
+export class TestComponent {}
+"#;
+
+    let options = ComponentTransformOptions { use_dom_only_mode: true, ..Default::default() };
+    let result = transform_angular_file(&allocator, "test.ts", source, &options, None);
+
+    // Empty imports means no directive dependencies → DomOnly mode
+    assert!(
+        result.code.contains("ɵɵdomElementStart"),
+        "Standalone with empty imports should use ɵɵdomElementStart. Output:\n{}",
+        result.code
+    );
+}

crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_inline_styles.snap

@@ -14,9 +14,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.ɵɵelementStart(0,"div",0);
+        i0.ɵɵdomElementStart(0,"div",0);
         i0.ɵɵtext(1,"Hello");
-        i0.ɵɵelementEnd();
+        i0.ɵɵdomElementEnd();
       }
     },styles:[".container[_ngcontent-%COMP%] { color: red; }"]});
 }

crates/oxc_angular_compiler/tests/snapshots/integration_test__component_with_multiple_styles.snap

@@ -13,9 +13,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.ɵɵelementStart(0,"div");
+        i0.ɵɵdomElementStart(0,"div");
         i0.ɵɵtext(1,"Content");
-        i0.ɵɵelementEnd();
+        i0.ɵɵdomElementEnd();
       }
     },styles:[".first[_ngcontent-%COMP%] { color: blue; }",".second[_ngcontent-%COMP%] { background: white; }"]});
 }

crates/oxc_angular_compiler/tests/snapshots/integration_test__component_without_styles.snap

@@ -13,9 +13,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.ɵɵelementStart(0,"div");
+        i0.ɵɵdomElementStart(0,"div");
         i0.ɵɵtext(1,"No styles");
-        i0.ɵɵelementEnd();
+        i0.ɵɵdomElementEnd();
       }
     },encapsulation:2});
 }

crates/oxc_angular_compiler/tests/snapshots/integration_test__event_before_property_in_bindings.snap

@@ -17,14 +17,14 @@ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:TestComponent,selector
     vars:1,consts:[[3,"click","disabled"]],template:function TestComponent_Template(rf,
         ctx) {
       if ((rf & 1)) {
-        i0.ɵɵelementStart(0,"button",0);
-        i0.ɵɵlistener("click",function TestComponent_Template_button_click_0_listener() {
+        i0.ɵɵdomElementStart(0,"button",0);
+        i0.ɵɵdomListener("click",function TestComponent_Template_button_click_0_listener() {
           return ctx.onClick();
         });
         i0.ɵɵtext(1,"Click");
-        i0.ɵɵelementEnd();
+        i0.ɵɵdomElementEnd();
       }
-      if ((rf & 2)) { i0.ɵɵproperty("disabled",ctx.isDisabled); }
+      if ((rf & 2)) { i0.ɵɵdomProperty("disabled",ctx.isDisabled); }
     },encapsulation:2});
 }
 (() =>{

crates/oxc_angular_compiler/tests/snapshots/integration_test__ngfor_attribute_ordering.snap

@@ -8,9 +8,9 @@ import * as i0 from '@angular/core';
 
 function TestComponent_li_0_Template(rf,ctx) {
   if ((rf & 1)) {
-    i0.ɵɵelementStart(0,"li");
+    i0.ɵɵdomElementStart(0,"li");
     i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
+    i0.ɵɵdomElementEnd();
   }
   if ((rf & 2)) {
     const item_r1 = ctx.$implicit;
@@ -28,8 +28,8 @@ static ɵfac = function TestComponent_Factory(__ngFactoryType__) {
 static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:TestComponent,selectors:[["test-comp"]],decls:1,
     vars:1,consts:[[4,"ngFor","ngForOf"]],template:function TestComponent_Template(rf,
         ctx) {
-      if ((rf & 1)) { i0.ɵɵtemplate(0,TestComponent_li_0_Template,2,1,"li",0); }
-      if ((rf & 2)) { i0.ɵɵproperty("ngForOf",ctx.items); }
+      if ((rf & 1)) { i0.ɵɵdomTemplate(0,TestComponent_li_0_Template,2,1,"li",0); }
+      if ((rf & 2)) { i0.ɵɵdomProperty("ngForOf",ctx.items); }
     },encapsulation:2});
 }
 (() =>{