Storybook: Angular & Knobs - DynamicModule has already been destroyed error appears when switching between components

[CodeByAlex]

Describe the bug
An error appears stating that the Dynamic module has already been destroyed. This is occurring on Version 5+ but is not occurring in Verison 4

To Reproduce
Steps to reproduce the behavior:

1. Create more than one component configuration
2. Switch between those components
3. You will then see the following errors:
   
   

The following only shows up in the console once and may be unrelated:

Expected behavior
The component should only be destroyed once which would stop this error from appearing in both the console and the action logger.

System:

• OS: MAC OS
• Browser: Chrome, Safari, firefox...havent tried IE but I would assume it would show up there
• Framework: Angular 6
• Addons:
  @storybook/addon-notes
  @storybook/addon-knobs
  @storybook/addon-a11y
  @storybook/addon-viewport -- sidenote - viewport is not showing up in the addons section but thats a separate issue
  @storybook/addon-actions

• Version: 5.0.0-alpha.9

[tmeasday]

Thanks for the report @CodeByAlex.

Do we see this behaviour in the angular-cli example?
Any idea what the error means?

[CodeByAlex]

@tmeasday do you have the link to the latest V5 angular cli example? or could you point me in the right direction to find it

[tmeasday]

It's in the repo at examples/angular-cli, but a built version is here: https://next--storybooks-angular.netlify.com

[CodeByAlex]

Thanks @tmeasday. Next—was what i was looking for. I’ll make sure to save that. I checked the console when on the angular example and it showed up with a similar error when switching between components. I'm not sure what's causing it at this time.

[tmeasday]

This issue seems to be related to knobs -- is that what you're seeing @CodeByAlex?

I'm only seeing the error when browsing away from a story with a knobs decorator.

The error comes from this line: https://github.com/storybooks/storybook/blob/247dd6a35382f432a39166615fba4f3ba59add63/app/angular/src/client/preview/angular/helpers.ts#L74

I don't really know how knobs or angular work so I can only speculate about what's going on. @ndelangen care to point the right person at this one? (is it you?)

[CodeByAlex]

@tmeasday I just removed the knobs addon from addon.js and I'm still seeing the error appear as seen below:

[CodeByAlex]

I removed all addons and I still get the error in the console when switching between components so I don't believe that it has to do with knobs specifically:

[tmeasday]

@CodeByAlex turning off the addon on the manager side (what you've done there) isn't going to change the behaviour on the preview side (where the stories run).

To disable knobs in the preview, remove the withKnobs decorator. When i do that, I see some other errors, but the above error is gone and the stories change as I browse around.

[gaetanmaisse]

It looks like the bug is caused by too many calls to render function from storybook/angular. And some of this calls are due to STORY_CHANGED event listener set here in knob addon. Each time a story changed knob send a message to force a rerendering, but SB core is already doing the same thing so we render function is called twice.

I tried to removed this listener and I didn't find what can be broken 🤷‍♂️ , @ndelangen do you remember why do you introduce that in this commit https://github.com/storybooks/storybook/commit/bae5a23a9356d3e29458017877e2022167bffa5c ?

[ndelangen]

@gaetanmaisse looks like knobs should do that anymore, now that it's in the core!

Good catch, would you want to fix this?

[shilman]

w00t!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.0-rc.7 containing PR #5753 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.