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

[alexis-klimatsidas]

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(R) Core(TM) 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)

[brandonpittman]

After updating to 6.2 from 6.1 today, I started seeing this too.

[shilman]

Does the problem go away if you use the legacy angular renderer?

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-angular-renderer

[brandonpittman]

@shilman Nope, still errors.

[Jakob-em]

Seems like the same issue as described here: #14147 (comment)

[activenode]

Hey guys. I just wanted to add to this. I am having a similiar issue although not for the lifecycle hooks but rather for all methods. Not sure if it is related but it reads like it is:

What I already found out is the following.

Imagine this pseudo (!) angular component:

@Component
({ template: '<div>{{ foobar }}</div>'})
class {
   someMethod() { return "hi" }
   get foobar() {
     debugger;
     return this.someMethod();
   }
}

Now when the Inspector stops at debugger; it will show that all properties but methods are set. Meaning calling this.someMethod() will fail saying _co.someMethod() is not a function because this contains everything but functions/methods apparently.

The problem is solved using the legacy renderer but I would not consider this "solved"

[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: #14147 (comment)

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

[Jakob-em]

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

There is also a third solution:
Filter the props passed to the story based on the argType information from compodoc (metod/input/output) and only pass non method args to the story. This can be done globally in a decorator.

[alexis-klimatsidas]

@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

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