storybookjs/storybook

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

Open

#25,726 opened on Jan 23, 2024

View on GitHub
 (3 comments) (2 reactions) (0 assignees)TypeScript (10,058 forks)batch import
angularbughelp wanted

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 7d 22h) (184 merged PRs in 30d)

Description

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: image

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: https://github.com/storybookjs/storybook/issues/21284

Contributor guide

Research direction
Investigate the Angular module setup in Storybook's decorators. The issue suggests that RouterModule.forRoot() is imported twice, possibly due to the way Storybook creates its own module tree. Check the Angular module imports in the story's module metadata and ensure that RouterModule.forRoot() is not being provided again in the root scope. Look at the storybook angular package code for how it handles Angular modules.
Tech stack
typescript
Domain
frontendtesting
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
AngularStorybook
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30