Skip to content

Angular devtools fails to display component information when it injects a number value #56595

@eblocha

Description

@eblocha

Is this a bug report or a feature request?

  • Bug Report
  • Feature Request

Please provide the steps to reproduce the issue [Bug Report only]

Create a component that injects a number via an injection token:

const MY_NUMBER = new InjectionToken<number>('my-number');

@Component({
  selector: 'app-component',
  standalone: true,
  providers: [{ provide: MY_NUMBER, useValue: 42 }]
})
export class AppComponent {
  readonly myNumber = inject(MY_NUMBER);
}

Using the chrome debugger shows it coming from valueToLabel inside component-tree.ts. It's trying to call <number>.startsWith('_'):

image

Link to source: https://github.com/angular/angular/blob/main/devtools/projects/ng-devtools-backend/src/lib/component-tree.ts#L324

Please provide the expected behavior vs the actual behavior you encountered [Bug Report only]

I'd expect the component details to display normally.

Please provide a screenshot if possible [Bug Report only]

This fails with e.startsWith is not a function:

image

The devtools window displays nothing:
image

Please provide the exception or error you saw [Bug Report only]

TypeError: e.startsWith is not a function
    at Se (component-tree.ts:341:11)
    at fe (component-tree.ts:330:12)
    at Ti (component-tree.ts:304:16)
    at c (component-tree.ts:123:29)
    at kn (component-tree.ts:149:5)
    at client-event-subscribers.ts:148:19
    at n (same-page-message-bus.ts:46:21)
    at _ZoneDelegate.invokeTask (zone.umd.js:443:1)
    at ZoneImpl.runTask (zone.umd.js:195:1)
    at ZoneTask.invokeTask [as invoke] (zone.umd.js:527:1)

Is this a browser-specific issue? If so, please specify the device, browser, and version. [Bug Report only]

No response

Description [Feature Request only]

No response

Proposed solution [Feature Request only]

No response

Alternatives considered [Feature Request only]

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions