Skip to content

Signal input not working in Angular 19 hybrid (AngularJS + Angular) app #62537

@AMCamb

Description

@AMCamb

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

upgrade, Don't known / other

Is this a regression?

Yes

Description

I have an Angular hybrid application (AngularJS + Angular 19).
When I try to use signal input to pass data from a parent, it throws an error.
Other features like classic @input and local signals work fine; only the new signal input fails when used in the hybrid context.

Minimal reproduction

<cnm-dummy-component [titleSignalInput]="'fromParent'" [titleNormalInput]="'title1'"></cnm-dummy-component>
import { Component, ChangeDetectionStrategy, input, Input, effect, signal } from '@angular/core';

@Component({
  selector: 'cnm-dummy-component',
  templateUrl: './dummy-component.component.html',
  styleUrls: ['./dummy-component.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true
})
export class DummyComponent {
  titleSignalInput = input('Dummy Component1'); // signal input (fails)
  @Input() titleNormalInput;                    // classic input (works)

  public readonly description = 'This is a dummy component for testing purposes';
  metaDesc = signal('This is a dummy component for testing purposes');

  constructor() {
    console.log('DummyComponent initialized');

    effect(() => {
      console.log('Title changed:', this.titleSignalInput());
    });

    setTimeout(() => {
      this.metaDesc.set('updated description');
    }, 5000);
  }

  public onButtonClick(): void {
    console.log('Dummy button clicked');
  }
}

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

NG0303: Can't bind to 'titleSignalInput' since it isn't a known property of 'cnm-dummy-component' (used in the 'SiteListingComponent' component template).
1. If 'cnm-dummy-component' is an Angular component and it has the 'titleSignalInput' input, then verify that it is included in the '@Component.imports' of this component.
2. If 'cnm-dummy-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component.

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

Angular CLI: 19.2.1
Node: 20.16.0
Package Manager: npm 10.8.1
OS: linux x64

Angular: 19.2.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.1
@angular-devkit/build-angular   19.2.1
@angular-devkit/core            18.2.0
@angular-devkit/schematics      19.2.1
@schematics/angular             19.2.1
ng-packagr                      19.2.0
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.15.0



"@angular/animations": "^19.2.14",
"@angular/cdk": "^19.2.14",
"@angular/common": "^19.2.14",
"@angular/compiler": "^19.2.14",
"@angular/core": "^19.2.14",
"@angular/forms": "^19.2.14",
"@angular/platform-browser": "^19.2.14",
"@angular/platform-browser-dynamic": "^19.2.14",
"@angular/router": "^19.2.14",
"@angular/upgrade": "^19.2.14",

"@uirouter/angular": "^16.1.0",
"@uirouter/angular-hybrid": "^19.0.0",
"@uirouter/angularjs": "^1.0.29",
"@uirouter/rx": "^1.0.0"

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: upgradeIssues related to AngularJS → Angular upgrade APIscore: reactivityWork related to fine-grained reactivity in the core frameworkneeds reproductionThis issue needs a reproduction in order for the team to investigate further

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions