ViewChild not working on Angular 8 + Ivy Renderer

🐞 bug report

Is this a regression?

Until Angular 7.2.14 everything works properly. Using Angular 8, it works too, if Ivy Renderer is not enabled.

Description

Using Ivy Renderer, the properties with the decorator ViewChild are not properly populated. I checked documentation without luck, so I don’t know if am I doing something wrong or if it is a bug.

🔬 Minimal Reproduction

See this project: https://github.com/igorgiovannini/angular-8-ivy-broken-viewchild

🔥 Exception or Error

ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at AppComponent.ngOnInit (app.component.ts:14)
    at callHook (core.js:4842)
    at callHooks (core.js:4806)
    at executeHooks (core.js:4757)
    at executePreOrderHooks (core.js:4729)
    at refreshDescendantViews (core.js:11593)
    at renderComponentOrTemplate (core.js:11976)
    at tickRootContext (core.js:13258)
    at detectChangesInRootView (core.js:13294)
    at RootViewRef.detectChanges (core.js:19856)

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.0.0-rc.2
Node: 10.14.1
OS: darwin x64
Angular: 8.0.0-rc.2
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0-rc.2
@angular-devkit/build-angular     0.800.0-rc.2
@angular-devkit/build-optimizer   0.800.0-rc.2
@angular-devkit/build-webpack     0.800.0-rc.2
@angular-devkit/core              8.0.0-rc.2
@angular-devkit/schematics        8.0.0-rc.2
@ngtools/webpack                  8.0.0-rc.2
@schematics/angular               8.0.0-rc.2
@schematics/update                0.800.0-rc.2
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

[kara]

@igorgiovannini The reason that your example doesn’t work is that you’re trying to access the results of a ViewChild query before the view has completed initializing. This is why your code works in the ngAfterViewInit hook (after view inits) and not the ngOnInit hook (before view inits).

In the previous runtime (View Engine), queries would be resolved at different times depending on where the results were located in the template and whether you were requesting ViewChild or ViewChildren. This is why in the official Angular docs, we recommend checking for query results in ngAfterViewInit - they are only guaranteed to populate by then (though in your case, the query populated earlier).

In Ivy, we have made the timing consistent so that both ViewChild and ViewChildren queries resolve after the view inits by default, rather than depending on the location of results in the template. It’s a bit easier to reason about, though it means that you won’t find view query results in ngOnInit by default. If you need the results of a query in that hook, you can explicitly choose to label the query as “static”.

So for your use case, you can either mark the query static (as the V8 schematic would do):

@ViewChild('test', {static: true}) test: ElementRef;

… or move the logic to ngAfterViewInit (preferred).

We will definitely have more documentation surrounding this as we get closer to Angular 8 final! But as this is expected behavior, I’m going to close this for now. Thanks for filing the issue.

[ericmartinezr]

Can you see if this issue https://github.com/angular/angular/issues/28643 is related to yours?