Calling field initializers (input, output, queries, etc) should be errors when not used to declare a field in a directive

[keatkeat87]

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

Yes

Description

Assign viewChildren() to a variable instead of a property.

export class AppComponent {
  constructor() {
    // assign viewChildren() to a variable instead of a property
    const titles = viewChildren<string, ElementRef<HTMLHeadingElement>>(
      'title',
      {
        read: ElementRef,
      }
    );

    effect(() => {
      console.log(titles());
    });
  }
}

run ngc
yarn run ngc -p tsconfig.json

output

export class AppComponent {
  constructor() {
    // assign viewChildren() to a variable not a property
    const titles = viewChildren("title", {
      read: ElementRef,
    });
    effect(() => {
      console.log(titles());
    });
  }
  static {
    this.ɵfac = function AppComponent_Factory(t) {
      return new (t || AppComponent)();
    };
  }
  static {
    this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({
      type: AppComponent,
      selectors: [["app-root"]],
      standalone: true,
      features: [i0.ɵɵStandaloneFeature],
      decls: 2,
      vars: 0,
      consts: [["title", ""]],
      template: function AppComponent_Template(rf, ctx) {
        if (rf & 1) {
          i0.ɵɵelement(0, "h1", null, 0);
        }
      },
    });
  }
}

the compile no generate viewQuery: function AppComponent_Query(rf, ctx) code.
I try another way also same

export class AppComponent {
  titles: Signal<readonly ElementRef<HTMLHeadingElement>[]>;

  constructor() {
    this.titles = viewChildren<string, ElementRef<HTMLHeadingElement>>(
      'title', { read: ElementRef, }
    );

    effect(() => {
      console.log(this.titles());
    });
  }
}

Not really sure if it's a bug or by design. Does the code style have to follow the required format for compilation?

Please provide a link to a minimal reproduction of the bug

https://github.com/keatkeat87/Angular-viewChildren-not-be-compile-when-assign-to-variable

Please provide the exception or error you saw

no exception

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.2.0-rc.0
Node: 18.17.0
Package Manager: yarn 1.22.19
OS: win32 x64

Angular: 17.2.0-rc.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1702.0-rc.0
@angular-devkit/build-angular   17.2.0-rc.0
@angular-devkit/core            17.2.0-rc.0
@angular-devkit/schematics      17.2.0-rc.0
@angular/cli                    17.2.0-rc.0
@schematics/angular             17.2.0-rc.0
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.3

Anything else?

No response

[JoostK]

This is not supported. Angular requires that inputs/outputs/queries/etc are declared and initialized as class members.

[pkozlowski-opensource]

As @JoostK pointed out, only field initializers are supported. Having said this, we should inform users of this misuse (a lint check, compiler error or some other mechanism).

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}