How does one reference a provider defined through a string token using @ViewChild in Angular 9, using the string token as a selector?

Question

According to the Angular documentation for the @ViewChild decorator, one of the supported selectors is a provider with a string token. However when I define a provider using a string token in a child component and try and reference it using the @ViewChild decorator the view query is undefined.

I know it's possible to reference the provider using the read property with the component it's registered in as a selector, but how do I reference it using the string token as a selector alone?

I'm specifically talking about this type of string token selector (not a class provider, template reference variable, component, directive or a TemplateRef):

Any provider defined through a string token (e.g. @ViewChild('someToken') someTokenVal: any)

Here's an example:

@Component({
  selector: 'app-child',
  template: `<h1>Child</h1>`,
  providers: [{ provide: 'Token', useValue: 'Value' }]
})

export class ChildComponent{}

@Component({
  selector: 'app-parent',
  template: `<app-child></app-child>`
})

export class ParentComponent implements AfterViewInit{
  @ViewChild('Token') childToken: string;

  ngAfterViewinit(){
    console.log('token: ', childToken);
  }
}

This logs:

token: undefined

I think that is a regression in Ivy. It should work with ViewEngine if you disable Ivy. — yurzui
You were right @yurzui. It is a regression. It works if I disable Ivy. Thank you. I've answered the question but if you'd like, you could answer it and I'll mark it as the accepted answer. Thank you again. — the_coops

the_coops the_coops · Accepted Answer · 2020-07-29T15:24:52

As @yurzui had mentioned this is a regression in Ivy. This will not work. If you want to use a string token provider as a selector in @ViewChild you need to disable Ivy in the tsconfig.json file.

{
  "angularCompilerOptions": {
    "enableIvy": false,
  }
}

How does one reference a provider defined through a string token using @ViewChild in Angular 9, using the string token as a selector?

2 Answers