Storybook: [Need help] Angular dependency can't resolve

Created on 6 Jul 2019  路  4Comments  路  Source: storybookjs/storybook

Describe the bug
Trying to create story of a simple Angular component, with a injected service. Result in following error
Can't resolve all parameters for ButtonComponent: (?).

To Reproduce
See below code snippets

Code snippets
button.component.ts

import { Component, OnInit } from '@angular/core';
import { AppService } from '../app.service';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent {

  constructor(
    public app: AppService
  ) {}

}

app.service.ts

import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class AppService {}

stories.ts

storiesOf('Button', module)
  .addDecorator(
    moduleMetadata({
      declarations: [
        ButtonComponent,
      ],
      providers: [
        AppService
      ]
    })
  )
  .add('default', () => ({
    template: `<app-button></app-button>`
  }));
angular question / support

Most helpful comment

@nnaynnay Are you using Angular 8? This may solve your issue https://github.com/storybookjs/storybook/issues/7457#issuecomment-514236598

All 4 comments

I'm having the exact same issue. I found similar question on stackoverflow, but it's unanswered.
Personally I believe the problem is how the service are provided through providedIn

As a workaround can recommend adding @Inject annotation in your button.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { AppService } from '../app.service';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent {

  constructor(
    @Inject(AppService) public app: AppService
  ) {}

}

I have exactly same problem. My component has two dependencies:
constructor( private elementRef: ElementRef, private renderer: Renderer2 ) {
And I'm gettin:
Unhandled Promise rejection: Can't resolve all parameters for MenuItemComponent: (?).
Any help/solution?

@nnaynnay Are you using Angular 8? This may solve your issue https://github.com/storybookjs/storybook/issues/7457#issuecomment-514236598

@danielddb Thanks much!
It works after update tsconfig.json emitDecoratorMetadata: true

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alexanbj picture alexanbj  路  3Comments

purplecones picture purplecones  路  3Comments

arunoda picture arunoda  路  3Comments

ZigGreen picture ZigGreen  路  3Comments

shilman picture shilman  路  3Comments