Hi , is it possible to provide angular module at a global level in storybook which gets loaded one time only and is available for all the stories.

[Vikas031]

Summary

The scenario is such that I'm registering the module in metadata in story decorator and now whenever the story is loaded in UI this module gets registered. It works fine when it is loaded for the first time but when I click on any other story and come back to this one , the module again gets registered ! (which I don't want bcz this module has certain code which shouldn't be triggered twice).

Hence, I need that the module be provided at global level which gets loaded once and is available too all the stories in storybook.

Please let me know , if anyone know how we can handle this. I'm not able to find any solution from the internet community regarding this.

Additional information

const meta: Meta = {
title: 'RadioGroup',
component: RadioGroupComponent,
decorators: [
moduleMetadata({
imports: [WebcomponentsModule],
}),
],

I want to provide this webComponentModule at global level instead of per story level and it shouldn't get triggered again when stories are switched rather it should get load one time only.

No response

Create a reproduction

No response

[Marklb]

You can't load a module once, because each story is an independent Angular application.

Not using inline rendering for the docs and maybe refreshing the preview iframe on each full render may be the only solution to totally prevent any global state from carrying over, but I don't have a snippet available to show how that could be done, at the moment.

Based on the name of the module, I assume the global code that you refer to is registering webcomponents. If that is the case then you may be able to see some of the problems and potential workarounds with trying to deal with those in the comments on #25243.

[Vikas031]

Hi Mark, Thanks for the reply.
Yes, your assumption is right about the module .It's actually an angular library module and I'm using customElement.define to convert angular component to webcomponent .

I don't think so the workaround you've mentioned will work in our scenario . Please do let me know if any other workaround/solution possible. I think storybook should provide a solution for such common case on how to handle this.

[Marklb]

I will think about it and see if I can come up with a solution. I can probably come up with a workaround, at the least, if you can share how your code works.

Would you be able to share a project or create one in Stackblitz? If you go to https://storybook.new/ you can generate a quick Angular Storybook project or the docs explain how to create a repro here.

I answer a lot of questions about using Storybook with Angular, but it is very rare for me to see a question about using custom elements. So, while I understand how Angular handles registering components as webcomponents and I think I know what the problem is that needs to be solved, it could be helpful to have more examples of how projects are actually using them to make sure a use case isn't overlooked.

[Vikas031]

I tried with refreshing preview iframe as a workaround, it works for my scenario. Sharing the code here .

But I think there should be provided an option if possible to load module at once for whole storybook

Note : Not a good workaround w.r.t UX because this will cause refresh on each story switch hence adding a delay in loading story everytime.

I've added the code in decorator.

export function storyIFrameReloader(story: any,context:any) { let sbPreviewIFrame = window.parent.document.getElementById('storybook-preview-iframe') as HTMLIFrameElement; if(context.id !== (window.parent as any).storyID){ (window.parent as any).storyID = context.id; sbPreviewIFrame?.contentWindow?.location.reload(); } return story(); }

[Marklb]

I am busy with a work project, so I haven't had time to check if there is already a way to do this or to implement anything that I feel will be a good workaround/solution. I did very quickly throw together a potential workaround, but it may have unexpected side-effects or could be done much better. https://stackblitz.com/edit/github-cdg1ky?file=.storybook%2Fpreview.ts,.storybook%2Frefresh-on-destroy.ts&preset=node

[antsfiles]

Hi,
I had to use createCustomElement from angular/elements, and I was using the injector in the provider like this in ApplicationConfig:

provideAppInitializer(() => {
      let injector = inject(Injector);
      declareWebComponents(injector);
    }),

export function declareWebComponents(injector: Injector) {
  let element = createCustomElement(MyComponent, {
    injector,
  });
  customElements.define('app-my-element', element);
}

BUT, for Storybook, in the stories file, I called once createApplication to get an other injector before the stories:

(async () => {
  const app = await createApplication();
  declareWebComponents(app.injector);
})();

It seems to not destroy the injector for my webcomponents when I navigate in the stories.