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

[izmaylovdev]

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:
1) Create component with ChangeDetecorRef as dependency.
2) 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"

[kroeder]

Can confirm this

[kroeder]

doing it like that works though - weird

  constructor(@Inject(ChangeDetectorRef) private cdr: ChangeDetectorRef) {}

This might be caused by this: https://github.com/storybookjs/storybook/blob/next/app/angular/src/client/preview/angular/components/app.component.ts#L51

I've never used componentRef.injector.get before but maybe it's causing this unwanted behavior

[izmaylovdev]

@kroeder

constructor(@Inject(ChangeDetectorRef) private cdr: ChangeDetectorRef) {}

In this case you don't get errors but this.cdr does not work.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[izmaylovdev]

So sad...

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[izmaylovdev]

As I can see, not only ChangeDetectorRef is missing inInjector, if I try to inject ElementRef orRenderer2, I get the same error... This also applies to nested components/directives.

[danielhdz56]

yeah any service i add in the constructor throws:
Can't resolve all parameters for CustomService: (?)

any way around this?

[patrickjm]

I'm having the same issue when I try to inject an ElementRef and Renderer2 into a directive's constructor. Based on the implementation, I can see why ElementRef especially would be difficult to inject, but it's also a really important part of Angular. Not sure where to go from here... I'm 40 stories/components in and just now finding out I can't write directives!

Edit: if it helps anyone, I was able to get around this issue using @HostBinding annotations on the directive for the properties I was originally trying to change on the ElementRef. Doesn't cover every case, though.

[patrickjm]

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

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

[rootdevelopper]

Hi:

I'm having the same issue, just like @danielhdz56, my story works just fine but as soon as I add a service to my component it breaks with the error:

Can't resolve all parameters for LoginComponent: (?, ?, ?).

I added "emitDecoratorMetadata": true, to .storybook/tsconfig.json and now I get the error: NullInjectorError: No provider for Router!

So I added a provider:

.addDecorator(
moduleMetadata({
declarations: [],
imports: [CommonModule, BrowserAnimationsModule, LoginModule],
providers: [Router, {provide: 'API_BASE_URL', useValue: 'http://localhost:8080/users'}]
})
)
and now, I'm getting the initial error again, but this time with the router:

Can't resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?, ?).

@storybook/angular v5.3.9

in angular:

@angular-devkit/architect 0.900.0-rc.10
@angular-devkit/build-angular 0.900.0-rc.10
@angular-devkit/build-optimizer 0.900.0-rc.10
@angular-devkit/build-webpack 0.900.0-rc.10
@angular-devkit/core 9.0.0-rc.10
@angular-devkit/schematics 9.0.0-rc.10
@angular/cdk 8.2.3
@angular/material 8.2.3
@angular/pwa 0.803.23
@ngtools/webpack 9.0.0-rc.10
@schematics/angular 9.0.0-rc.10
@schematics/update 0.900.0-rc.10
rxjs 6.5.4
typescript 3.7.5
webpack 4.41.2

[patrickjm]

@rootdevelopper You probably need to add the angular routing module to your decorator imports

[rootdevelopper]

thanks, @patrickjm, I tried that already, I forgot to mention.
A few weeks ago I wasn't able to run storybook in angular 9 RC, so I'll wait a few more weeks to see if this issue gets resolved on the next storybook release.

[kroeder]

I've created a PR (#9701) that should fix this issue. It will add "emitDecoratorMetadata": true to Storybook without the need of adding it to .storybook/tsconfig.json

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.4 containing PR #9701 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.11 containing PR #9701 that references this issue. Upgrade today to try it out!

[brezodani]

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.