BUG: ViewChild property is set before OnInit

[kukjevov]

I'm submitting a...

[X] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Currently when you have

@Component(
{
    selector: 'home-view',
    templateUrl: 'home.component.html'
})
export class HomeComponent implements OnInit, AfterViewInit
{
    @ViewChild('treeview')
    public tree: FancyTreeComponent;

    public ngOnInit()
    {
        console.log(this.tree);//NOT NULL, SHOULD BE NULL
    }

    public ngAfterViewInit()
    {
        console.log(this.tree);//NOT NULL, OK
    }
}

before i dont know in which version was this.tree null before first call of ngAfterViewInit, now its not, which allows me to access FancyTreeComponent before it was properly initialized!

Before i was able to check for null and knew that component was not initialized.

Even documentation says View queries are set before the ngAfterViewInit callback is called. which does not deny that it can be initialized before ngOnInit but in past it was exactly like that it was null.

Is it a not mentioned breaking change?

Expected behavior

ViewChild, ViewChildren, ContentChild, ContentChildren should be initialized/set only after ngAfterViewInit, respectively ngAfterContentInit which are not.

Minimal reproduction of the problem with instructions

Use code above.

What is the motivation / use case for changing the behavior?

Environment

Angular version: 5.1.2


Browser: All
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 9.4.0  
- Platform:  Windows 

Others:

[ericmartinezr]

If I'm not wrong that changed long ago over here #5993

Component view is not yet created when component constructor is called.
-> use onInit lifecycle callback to access the view of a component

[kukjevov]

Hmmm, but there is one problem. This allows you to use component before its initialization. Especialy if you have some code in property setters which are Input, that means you have to create property initialized and set it in ngOnInit and check it in setters. Not very nice solution.

[pkozlowski-opensource]

I tend to agree with @kukjevov - the current behaviour seems to be side-effect of implementation choices, rather than designing API to user expectations.

[alexzuza]

Static queries (ViewChild and ContentChild that are not inside embedded view) are initialized during view creation https://github.com/angular/angular/blob/master/packages/core/src/view/view.ts#L333-L336.

Dynamic queries (VIewChildren, ContentChildren and ViewChild/ContentChild that are located inside embedded view) are calculated during change detection cycle. https://github.com/angular/angular/blob/master/packages/core/src/view/view.ts#L361
https://github.com/angular/angular/blob/master/packages/core/src/view/view.ts#L371

As far as I know this behavior was added as part of new view engine here 4e7752a

[jotatoledo]

Because of this its now possible to get weird behaviors like this:

https://stackblitz.com/edit/dog-stuff

The value of an input property is setted on onInit, but its not reflected on the view or in the model itself at the start of afterViewInit

[pkozlowski-opensource]

We are going to make timing of @ViewChild and @ViewChildren assignment the same time with ivy view engine. Assignment will be happening after ngOnInit / ngDoCheck and before ngViewInit / ngViewChecked.

[kukjevov]

Was this one solved by 19afb79 ? It looks like it could be it.

[kukjevov]

I am closing this as it has been at least partially solved by angular 8 and need of static flag for ViewChildren

[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.}