When using TippyModule.forRoot().providers inside storybook component I get this error: Converting circular structure to JSON starting at object with constructor 'InjectionToken'

[manyx]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I am using storybook 6.3.2 and I have a component that uses TippyModule. When I add the providers to that component story I get the error I mentioned:

decorators: [ moduleMetadata({ imports: [TooltipModule, TippyModule], providers: TippyModule.forRoot().providers || [] }) ],

and this is the error:
Converting circular structure to JSON --> starting at object with constructor 'InjectionToken' | property 'ɵprov' -> object with constructor 'Object' --- property 'token' closes the circle TypeError: Converting circular structure to JSON --> starting at object with constructor 'InjectionToken' | property 'ɵprov' -> object with constructor 'Object' --- property 'token' closes the circle at JSON.stringify (<anonymous>) at CanvasRenderer.push../node_modules/@storybook/angular/dist/ts3.9/client/preview/angular-beta/AbstractRenderer.js.AbstractRenderer.fullRendererRequired (http://localhost:6006/vendors~main.iframe.bundle.js:117109:42) at CanvasRenderer.<anonymous> (http://localhost:6006/vendors~main.iframe.bundle.js:117069:35) at step (http://localhost:6006/vendors~main.iframe.bundle.js:117001:23) at Object.next (http://localhost:6006/vendors~main.iframe.bundle.js:116982:53) at http://localhost:6006/vendors~main.iframe.bundle.js:116976:71 at new ZoneAwarePromise (http://localhost:6006/vendors~main.iframe.bundle.js:300092:33) at push../node_modules/@storybook/angular/dist/ts3.9/client/preview/angular-beta/AbstractRenderer.js.__awaiter (http://localhost:6006/vendors~main.iframe.bundle.js:116972:12) at CanvasRenderer.push../node_modules/@storybook/angular/dist/ts3.9/client/preview/angular-beta/AbstractRenderer.js.AbstractRenderer.render (http://localhost:6006/vendors~main.iframe.bundle.js:117061:16) at CanvasRenderer.<anonymous> (http://localhost:6006/vendors~main.iframe.bundle.js:117229:74)

Expected behavior

I shouldn't get any error when using TippyModule.forRoot() together with storybook

Minimal reproduction of the problem with instructions

Install storybook 6.3.2, add a component that uses TippyModule, inside the story file add the decorators imports property:

decorators: [ moduleMetadata({ imports: [ TooltipModule, TippyModule], providers: TippyModule.forRoot().providers || [] }) ],

What is the motivation / use case for changing the behavior?

It's a bug: Converting circular structure to JSON

Environment

 System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.12.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Safari: 14.0

Angular version: 11.2.13

Browser:
- [x ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 

[jon-coffey]

I'm using Storybook and it's working perfectly fine. You have to use the TippyModule.forRoot() in the imports section of your ng module. I don't know what the intention is behind to use the provider directly.