Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

No providers for Angular's services (ChangeDetectorRef, Renderer, ElementRef) in Angular.

See original GitHub issue

Describe the bug I try to create story for component which has a ChangeDetecorRef as dependency. As result I got an error Can't resolve all parameters for MyComponentName: (?).. If remove ChangeDetectorRef, all works well.

To Reproduce Steps to reproduce the behavior:

Create component with ChangeDetecorRef as dependency.
Try to write story for the component.

Expected behavior Story works well.

Screenshots

System:

OS: Windows10
Device: Dell Latitude
Browser: chrome
Framework: angular@8
Version: @storybook/angular": “^5.1.9”

Issue Analytics

State:
Created 4 years ago
Comments:17 (5 by maintainers)

Top GitHub Comments

3reactions

patrickjmcommented, Nov 27, 2019

The solution to this is adding "emitDecoratorMetadata": true to your .storybook/tsconfig.json.

https://stackoverflow.com/a/57115788/2609014

0reactions

brezodanicommented, Feb 17, 2020

https://stackoverflow.com/a/57115788/2609014

This helped me, thanks. Just added to tsconfig.json the

"compilerOptions": {
      "emitDecoratorMetadata": true,
    },

I’m using 5.3.6, did not try the newer version @shilman mentioned above, but I’m guessing the PR #9701 solved that, cuz it does the same.

Top Results From Across the Web

angular - Trigger update of component view from service

ChangeDetectorRef is not option to use here. It is looking for changes in a given component and its children.

ChangeDetectorRef

Base class that provides change detection functionality. A change-detection tree collects all views that are to be checked for changes. Use the methods...

Using Renderer2 in Angular

Learn how to use methods from Angular's Renderer2 service to abstract ... constructor(private renderer: Renderer2, private el: ElementRef) ...

Make the most of Angular DI: private providers concept

Get some Angular entities like ChangeDetectorRef , ElementRef and other from DI. · Get a service to use it in a component. ·...

[Solved]-Angular 4: Mock ElementRef-angular.js

_providers array. And then we can say: hey, TestBed , give me this provider ElementRef : // ... let elRef: ElementRef; beforeEach(() =>...