Skip to content

Decide: two @Component on one class — ngtsc compiles the first with no error; OXC's HMR text scan pairs the second #521

Description

@Brooooooklyn
import {Component} from '@angular/core';
@Component({selector: 'a-cmp', template: 'first'})
@Component({selector: 'b-cmp', template: 'second'})
export class C {}

ngtsc 22.1.7 gives no diagnostic. It compiles the first @Component and leaves the second as a runtime decorator. At runtime that second decorator replaces ɵcmp with a JIT getter, so the module crashes on load without @angular/compiler. Same with OXC's output. So the input is broken under both compilers, and there is no ngtsc error for OXC to copy.

OXC still differs from ngtsc in two small ways. Opening this to decide whether either is worth fixing.

Compile output

OXC (#504 tip and main, same output):

@Component({selector: 'b-cmp', template: 'second'})
export class C {
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({type:C,selectors:[["a-cmp"]], ... i0.ɵɵtext(0,"first") ...});
}
... i0.ɵsetClassMetadata(C,[{type:Component,args:[{selector:"a-cmp",template:"first"}]}],null,null)

ngtsc 22.1.7:

let C = class C {
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: C, selectors: [["a-cmp"]], ... i0.ɵɵtext(0, "first") ... });
};
C = __decorate([
    Component({ selector: 'b-cmp', template: 'second' })
], C);
... i0.ɵsetClassMetadata(C, [{
        type: Component,
        args: [{ selector: 'a-cmp', template: 'first' }]
    }, {
        type: Component,
        args: [{ selector: 'b-cmp', template: 'second' }]
    }], null, null)

Both compile the first decorator and keep the second. Difference 1: ngtsc's setClassMetadata lists both decorators, OXC's lists only the compiled one.

Runtime (node, @angular/core 22.1.7, no @angular/compiler), both outputs:

Error: The component 'C' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

HMR (Vite plugin)

Rust reports componentDecorators = {"c.ts@C": "Component"}, and templateUpdates["c.ts@C"] is the template of the first decorator (ɵɵtext(0,"first")).

stripComponentMetadata empties the template: / styles: of the decorator locateComponentDecorators pairs with C. Pass 2 of that scan looks for class X only between one decorator's ) and the next decorator's @, so the first @Component pairs with no class and the second one gets C. Difference 2: the plugin empties the decorator the compiler did not take:

pairs: [["C","({selector: 'b-cmp', template: 'second'})"]]
edit first  (compiled)     -> stripped forms differ => full reload
edit second (not compiled) -> stripped forms equal  => HMR event, but the update holds the first template, so nothing changes

(Checked by running the real decorator-fields.ts functions and a copy of stripComponentMetadata with oxnode. Same pairing on main, where the scan only looks for the literal @Component(.)

Where

  • crates/oxc_angular_compiler/src/component/transform.rs: find_component_decorator takes the first match (same as ngtsc); component_decorators reports only its callee text, not its position.
  • napi/angular-compiler/vite-plugin/utils/decorator-fields.ts: locateComponentDecorators, pass 2 (bounded class-name scan).
  • napi/angular-compiler/vite-plugin/index.ts: stripComponentMetadata keys the decorators by class name, so two same-spelled decorators on one class can't be told apart.

On main?

Yes (both differences). componentDecorators itself is only on the #504 stack (d1fa6c4).

Options

  1. Leave as is: the input already crashes at runtime with ngtsc too.
  2. Report the compiled decorator's span (not only its spelling) in componentDecorators, so the plugin empties exactly that one.
  3. List every class decorator in setClassMetadata, like ngtsc.
  4. Add a warning for a second Angular class decorator of the same kind (ngtsc has none, so this would go beyond ngtsc).

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    questionFurther information is requested

    Type

    No type

    Fields

    Priority

    None yet

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions