Storybook: Service is not resolved with Angular application

[Drag13]

Describe the bug
If component contains any hand written service, storybook will throw an error

Can't resolve all parameters for ..

To Reproduce

1. Create new application using @angular/cli
2. Generate new service
3. Inject new service to the app component
4. Start the application with npm start

Currently everything working perfectly.

1. Install storybook
2. Write short story about AppComponent (please, check the code bellow)
3. Start storybook
4. See error

Expected behavior
Component should be shown without any issue

Screenshots

Code snippets

Service:

import { Injectable } from '@angular/core';
@Injectable({  providedIn: 'root'})
export class TestService { name = 'hello' }

Component:

import { Component } from '@angular/core';
import { TestService } from './test.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = '';

  constructor(testService: TestService) { this.name = testService.name }
}

Module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { TestService } from './test.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [TestService],
  bootstrap: [AppComponent],
})
export class AppModule { }

Story

import { storiesOf, moduleMetadata } from '@storybook/angular';
import { AppModule } from 'src/app/app.module';
import { TestService } from 'src/app/test.service';

storiesOf('Welcome', module)
  .addDecorator(moduleMetadata({
    imports: [AppModule],
    providers: [TestService]
  }))
  .add('to Storybook', () => ({
    template: '<app-root></app-root>'
  }));

Snippets:

npx @angular/cli new test
npm run ng generate service test
npx -p @storybook/cli sb init --type angular

System:

• OS: Windows10
• Browser: Any
• Framework: angular 8.1.1
• Version: 5.1.9

Additional context
May be I am missing something very simple? But it perfeclty works with ng serve and building in AOT mode. I tried to follow this article https://www.learnstorybook.com/angular/en/screen/ but with no luck.

Dependecies looks like here:

{
   "@angular-devkit/build-angular": "~0.801.1",
    "@angular/cli": "~8.1.1",
    "@angular/compiler-cli": "~8.1.1",
    "@angular/language-service": "~8.1.1",
    "@babel/core": "^7.5.4",
    "@storybook/addon-actions": "^5.1.9",
    "@storybook/addon-links": "^5.1.9",
    "@storybook/addon-notes": "^5.1.9",
    "@storybook/addons": "^5.1.9",
    "@storybook/angular": "^5.1.9",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "babel-loader": "^8.0.6",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
}

[Drag13]

Hi guys!

Sorry for disturbing but does any one have a chance to look into this issue? If it exists, than, probably a lot of functionality is broken, because having service inside the component is quite common scenario in Angular.

[danielddb]

@Drag13 What does your tsconfig.json look like? I had exactly the same issue since upgrading to Angular 8 and added emitDecoratorMetadata: true and this fixed the issue.

[Drag13]

@danielddb Many thanks for the answer. With emitDecoratorMetadata: true flag it starts working as expected.

Thank you so much.

[Drag13]

Shouldn't this be documented somehow?
I can try to make a PR if it's ok.

[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!

[ttma1046]

Thanks!

[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!