rangle / augury

Angular Debugging and Visualization Tools
https://augury.rangle.io
MIT License
2.01k stars 216 forks source link

Component provider string injection token breaks component tree rendering #1366

Closed Klaster1 closed 5 years ago

Klaster1 commented 5 years ago

Augury version: 1.22.0 Angular version: 7.2.2 Date: 01.02.2019 OS: Windows 10

Demo test application: https://angular-ofbttw.stackblitz.io https://stackblitz.com/edit/angular-ofbttw?file=src%2Fapp%2Fapp.component.ts

import { Inject, Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '{{foo}}',
  providers: [
    {provide: 'FOO_TOKEN', useValue: 'component foo provider value'}
  ]
})
export class AppComponent  {
  name = 'Angular';
  constructor(@Inject('FOO_TOKEN') private foo: string) {}
}

Description of issue: When component provider uses string as an injection token, Augury throws " FOO_TOKEN is not an object!" error and Augury component tree doesn't render.

Steps to reproduce:

  1. Use string injection token for component provider.
  2. Open Augury in inspector.

Additional details:

The issue happens because Description.prototype.getProviderDescription calls Reflect.getMetadata over provider token without checking it's type, so Reflect.getMetadata throws, since it expects an object. As a consequence, the component tree in Augury does not render. For example, this happens with @uirouter/angular-hybrid, which uses such a technique. I noticed that resolveTokenIdMetaData in parse-modules.ts checks for this, while getProviderDescription does not.

1311 looks related.