[Bug]: RouterModule.forRoot() is imported twice when loading a story

[jiacoucci-extron]

Describe the bug

When importing the RouterModule and using the forRoot() pattern for routing storybook seems to import this twice causing NG04007: The Router was provided more than once.

You can see this in the screenshot below:

I see this error in:
storybook 7.4.3 Angular 15
storybook 7.5 Angular 16.
I even upgraded to 7.6.10 with Angular 15 and still had the same issue.

I do not have this error in storybook 7.4.3 Angular 14.

To Reproduce

Stackblitz: https://stackblitz.com/edit/github-vrpkro-pu8ckn?file=src%2Fstories%2FPage.stories.ts

Code change on line 22 in Page.Stories.ts
Reproduction:

1. Load project
2. Navigate to page example
3. The error will appear in place of story

You can navigate to the other examples and see that without the RouterModule.forRoot() imported you will not have the same issue.

System

Local project: 7.4.3
StackBlitz: 7.5.0-alpha
chrome: Version 120.0.6099.234

Additional context

I found a similar issue that has been resolved here: #21284

[Marklb]

I am not positive, at the moment, why it gives an error about being imported twice, but if you fix the warning logged by Storybook about not using forRoot directly in a module's imports then the error goes away. forRoot should only be imported in the root module and a Storybook story is a standalone component, so it doesn't define a root module. Standalone component projects expect forRoot to be in the applicationConfig's providers and wrapped in importProvidersFrom.

...
decorators : [
  ...
  applicationConfig({
    providers: [importProvidersFrom(RouterModule.forRoot([]))],
  }),
]

Switching from importProvidersFrom(RouterModule.forRoot([])) to provideRoutes([]) would probably be better, but shouldn't be required.

Here is your Stackblitz, without it throwing an error: https://stackblitz.com/edit/github-vrpkro-mwqned?file=src%2Fstories%2FPage.stories.ts

[jiacoucci-extron]

Thanks for pointing that out, I tried this in my local project and it did get rid of the error but routing does not work in the example. I'll update that stack blitz to have an example with routing when I have time. If you have any thoughts on how to fix that issue that would be great. Never had this issue until angular 15 and storybook 7 paired together.

[Marklb]

@jiacoucci-extron I just got back around to this and I added routes to my Stackblitz project and didn't get any problems. So, if you are still having trouble, can you provide an example of how you are defining the routes.
https://stackblitz.com/edit/github-vrpkro-jc2ax1?file=src%2Fstories%2FPage.stories.ts,src%2Fstories%2Fpage.component.ts