Service is not resolved with Angular application

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"
}

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