8000 [Migration issue Angular 18 -> 19] toObservable is executed too early and I can't access .required inputs from deffered children · Issue #60804 · angular/angular · GitHub
[go: up one dir, main page]
Skip to content

[Migration issue Angular 18 -> 19] toObservable is executed too early and I can't access .required inputs from deffered children #60804

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
TomaszStanik opened this issue Apr 9, 2025 · 4 comments
Closed

[Migration issue Angular 18 -> 19] toObservable is executed too early and I can't access .required inputs from deffered children #60804

TomaszStanik opened this issue Apr 9, 2025 · 4 comments

Comments

@TomaszStanik
Copy link
TomaszStanik commented Apr 9, 2025 •
edited
Loading

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

core

Is this a regression?

Yes

Description

Hello,

I'm facing issues with toObservable while migrating angular v18 app to v19.2.5.

When content children is loaded deffered, toObservable throws errors while accessing to model required properties.

Component HTML where is everyting working:

<parent>
   <child [value]="1" />
</parent>

Deffered loading component:

<parent>
   @defer {
      <child [value]="1" />
   } @loading (minimum 1000ms) {
      Loading....
   }
</parent>
@Component({ selector: 'child', .... })
export class ChildComponent {
   readonly value = model.required<any>();
}

@Component({ .. })
export class ParentComponent{
  private readonly children = contentChildren(ChildComponent );

  constructor() {
    afterRenderEffect(() => {
      const children = this.children();

      if (children.length > 0) {
        console.log(children[0].value()); // Success!
      }
    });

    toObservable(this.children).subscribe((children) => {
      if (children.length > 0) {
        // Uncaught RuntimeError: NG0952: Model is required but no value is available yet
        console.log(children[0].value());
      }
    });
  }
}

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-x2fxd5yb?file=src%2Fmain.ts

Please provide the exception or error you saw

Uncaught RuntimeError: NG0952: Model is required but no value is available yet

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

Angular CLI: 19.2.5
Node: 18.20.3
Package Manager: npm 10.2.3
OS: linux x64

Angular: 19.2.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.5
@angular-devkit/build-angular   19.2.6
@angular-devkit/core            19.2.5
@angular-devkit/schematics      19.2.5
@angular/cdk                    19.2.7
@angular/material               19.2.7
@schematics/angular             19.2.5
rxjs                            7.8.1
typescript                      5.5.4

Anything else?

This is causing problems with handling events. For example, we can't do things like that:

private readonly children = contentChildren(ChildComponent);

constructor() {
    this.handleItemsValue();
}

private handleItemsValue(): void {
    toObservable(this.children).subscribe(children => {
         const values = this.children.map(x => x.value());  // Error

         saveValuesInLocalStorage(values);
   });
}
@TomaszStanik TomaszStanik changed the title [Migration issue Angular 18 -> 19] toObservable is rising too early and cannot access .required inputs. [Migration issue Angular 18 -> 19] toObservable is executed too early and cannot access .required inputs from deffered children Apr 9, 2025
@TomaszStanik TomaszStanik changed the title [Migration issue Angular 18 -> 19] toObservable is executed too early and cannot access .required inputs from deffered children [Migration issue Angular 18 -> 19] toObservable is executed too early and I can't access .required inputs from deffered children Apr 9, 2025
@TomaszStanik
Copy link
Author

I think it could be duplicate of:
#59067

@JeanMeche
Copy link
Member
JeanMeche commented Apr 9, 2025 •
edited
Loading

Yep, exactly let's fold the discussion with the other issue.

Also, we're curious why are you reaching for toObservable here ?

@TomaszStanik
Copy link
Author

@JeanMeche Hmmm. Why I shouldn't?

I just wanna to get the moment of the collection change and when is ready to get the properties from them. Llike in example I wrote above:

private readonly children = contentChildren(ChildComponent);

constructor() {
    this.handleItemsValue();
}

private handleItemsValue(): void {
    toObservable(this.children).subscribe(children => {
         const values = this.children.map(x => x.value());  // Error

         saveValuesInLocalStorage(values);
   });
}

How I can write this different?

In v18 everyting works fine and the all behaviors was predictable, like other members wrote. Due to this change we stuck on 18, because this behaviors is too big breaking-changes and half of application logic need to be changed - but for now we're not sure how to make it properly.

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators May 10, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@JeanMeche @TomaszStanik
0