ERROR TypeError: provider.ngAfterViewInit is not a function (Angular)

Describe the bug There is an error when we are trying to write a story for an Angular component that uses the interface “AfterViewInit” and its function “ngAfterViewInit”. The error that we have on all browsers is:

StorybookWrapperComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: provider.ngAfterViewInit is not a function
at callProviderLifecycles (core.js:24883)
    at callElementProvidersLifecycles (core.js:24857)
    at callLifecycleHooksChildrenFirst (core.js:24847)
    at checkAndUpdateView (core.js:31731)
    at callWithDebugContext (core.js:32553)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:32295)
    at ViewRef_.detectChanges (core.js:24264)
    at ApplicationRef.tick (core.js:29474)
    at ApplicationRef._loadComponent (core.js:29512)
    at ApplicationRef.bootstrap (core.js:29448)

To Reproduce my-component.component.ts

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit, AfterViewInit {

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    console.log("error here");
  }

}

my-component.stories.ts

import { Story, Meta } from '@storybook/angular/types-6-0';
import { MyComponentComponent } from './my.component';

export default {
  title: 'Examples/MyComponentComponent',
  component: MyComponentComponent,
  argTypes: {
  },
} as Meta;

const Template: Story<MyComponentComponent > = (args: MyComponentComponent) => ({
  props: args,
});

export const Default = Template.bind({});
Default.args = {};

System System: OS: macOS 10.15.4 CPU: (8) x64 Intel® Core™ i7-4770HQ CPU @ 2.20GHz Binaries: Node: 14.4.0 - ~/.nvm/versions/node/v14.4.0/bin/node npm: 6.14.5 - ~/.nvm/versions/node/v14.4.0/bin/npm Browsers: Chrome: 89.0.4389.128 Firefox: 54.0.1 Safari: 13.1 npmPackages: @storybook/addon-actions: ^6.2.5 => 6.2.5 @storybook/addon-essentials: ^6.2.5 => 6.2.5 @storybook/addon-links: ^6.2.5 => 6.2.5 @storybook/angular: ^6.2.5 => 6.2.5

Extra Info The error is present only the first time that we use the story and it goes away if we refresh the story (refresh from the browser)

[alexis-klimatsidas]

Hello,

Thanks everybody for the responses and specially @Jakob-em because he shows us the workaround that works perfectly. It seems that the problem is the definition of the storybook props. Instead of this:

const Default: Story<MyComponent> = (args: MyComponent) => ({ props: args });

You should do this: const Default: Story<MyComponent> = (args: MyComponent) => ({ props: { height: args.height } });

Compodoc is the one that creates the problems, so there are couple of solutions in order to solve this problem:

1. Remove compodoc
2. Inside the story, pass the props one by one and never do this props: args

More info here: https://github.com/storybookjs/storybook/issues/14147#issuecomment-799540607

@activenode do one of the two changes and you will be fine i guess.

[Jakob-em]

@Jakob-em that’s fine too but wouldn’t be much better if the filtering is done inside the Story? Usually the props passed are the ones annotated with @Input right? The Story can even throw an error if there is a prop passed and it is not defined as @Input

I think the intention is that you can also override internal properties of your component in the story even if these properties are no inputs.