storybook: Storybook 6.4 with Angular 13 breaks lifecycle hooks of abstract component
Describe the bug
In my Angular 13 project using Storybook 6.4, I am using an abstract component to destroy Observables. There I provide a subject, and in ngOnDestroy() that subject is completed. Since Storybook 6.4, I am getting a runtime error in those stories where I use that abstract component:
this.destroy$.next is not a function
It seems like the subject is already destroyed.
To Reproduce https://github.com/dsimon-onventis/storybook-lifecycle-errors-repro
Open one of the “Button” stories, and then navigate to another story.
System Environment Info:
System: OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa) CPU: (8) x64 Intel® Core™ i5-8365U CPU @ 1.60GHz Binaries: Node: 14.18.1 - /usr/local/bin/node Yarn: 3.1.1 - /usr/bin/yarn npm: 8.1.4 - ~/.npm-global/bin/npm Browsers: Chrome: 96.0.4664.45 npmPackages: @storybook/addon-actions: ^6.4.1 => 6.4.1 @storybook/addon-docs: ^6.4.1 => 6.4.1 @storybook/addon-essentials: ^6.4.1 => 6.4.1 @storybook/addon-links: ^6.4.1 => 6.4.1 @storybook/angular: ^6.4.1 => 6.4.1 @storybook/builder-webpack5: ^6.4.1 => 6.4.1 @storybook/manager-webpack5: ^6.4.1 => 6.4.1
Additional context
With angularLegacyRendering set to true, there are no runtime errors.
About this issue
- Original URL
- State: open
- Created 3 years ago
- Reactions: 12
- Comments: 16 (1 by maintainers)
Experiencing this issue as well when navigating between stories.
this.destroy$.next is not a function.
ngOnDestroy() { this.destroy$.next(); this.destroy$.complete();}The problem is in the Compodoc library. Add comment
@ignoreon the property that is converted to a string by mistake and the problem will disappear. e.g.Also you can try this
I was able to bypass this issue by initializing the destroy subject in the constructor. When it was initialized as your example has it, it gets set to a string of its initialization. i.e. onDestroy = ‘new Subject()’
I’m already using the angular builder, same issue. For me, the workaround works.