Angular - Add component story with dependencies

[felipe-norato]

Issue details

I had some errors when I try to create a story for a component that has dependencies, like pipes and directives.

Version of Storybook and optionally any affected addons that you're running

• storybook/addon-actions ^3.3.0-alpha.4
• storybook/addon-knobs ^3.3.0-alpha.4
• storybook/addon-links ^3.3.0-alpha.4
• storybook/addon-notes ^3.3.0-alpha.4
• storybook/addons ^3.3.0-alpha.4
• storybook/angular ^3.3.0-alpha.4
• angular/cli 1.6.0

Code Snippets

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


import { AppComponent } from './app.component';
import { CustomDirectiveDirective } from './custom-directive.directive';
import { CustomPipePipe } from './custom-pipe.pipe';


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

// Pipe
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customPipe'
})
export class CustomPipePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return value;
  }
}


// Component

import { Component, OnInit, Directive } from '@angular/core';

@Component({
  selector: 'selector-name',
  template: `<h1>{{ 'foobar' | customPipe }}</h1>`
})

export class NameComponent {}

// Story
import { storiesOf } from '@storybook/angular';

storiesOf('NameComponent', module)
  .add('with text', () => ({
    component: NameComponent,
    props: { }
}))

Returns the dependency injection error

The pipe 'customPipe' could not be found ("<!--The content below is only a placeholder and can be replaced.--><h1>{{ [ERROR ->]'title' | customPipe }}!</h1

[igor-dv]

What is the angular version in this case ? Can you elaborate where the error is happening ?

[felipe-norato]

@igor-dv It's angular 5.0.0
This is the same error when miss the dependency injector for the pipe.
In the first comment I attach module code.

[igor-dv]

I've added a PR to fix this. Thanks !

[felipe-norato]

Amazing, man!
Thanks for you help!

[felipe-norato]

@igor-dv Found the same behavior for apply a directive with input

Code Snippets

// Directive
import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[appCustomDirective]'
})
export class CustomDirectiveDirective {
  @Input() directiveAttr: number;
}

// Component

import { Component, OnInit, Directive } from '@angular/core';

@Component({
  selector: 'selector-name',
  template: `<div appCustomDirective [directiveAttr]='"foobar"' >has directive with attr</div>`
})

export class NameComponent {}

// Story
import { storiesOf } from '@storybook/angular';

storiesOf('NameComponent', module)
  .add('with text', () => ({
    component: NameComponent,
    props: { }
}))

Console error

div(appCustomDirective, [directiveAttr]='foobar') has directive with attr

[igor-dv]

Yeah. I think @alterx have a more robust solution for the other missing features. Once #2467 will be finished we will take care of other stuff. Thanks for the feedback, if you have more of them, please write about it, we need more testers =)

[alterx]

Yup, @noratodaitan, we have a solution coming that will allow people to inject schemas, providers et al (basically everything you can include in a NgModule).

[felipe-norato]

That sounds great, I will write more tests here.

[alterx]

@noratodaitan here's the PR #2526
We still need to test some stuff but please do give it a spin and let us know how that goes :)