angularstorybookangular-storybook

How to configure storybook story for module with RouterLink


Cannot configure story for module where routerLink is used due to error

ERROR NullInjectorError: StaticInjectorError(DynamicModule)[RouterLinkActive -> Router]

To Reproduce Steps to reproduce the behavior: demo-app Run app and you can test that there is no possible solution to add RouterModule to work with story. It cannot be configured with RouterTestingModule, RouterModule, RouterModule.forRoot with iframe.html path. There is always the same error about missing provider.

Expected behavior To run application and story with routerLink

Additional context Latest version of storybook 5.3.3 and angular ~8.2.14 I was working with different configuration 5.2.8 and this issue does not appear.

How to configure this module, is there an issue in storybook?

Storybook issue


Solution

  • In case you are working with angular 15 and also want to render the router-outlet, I was able to solve it like this:

    in preview.js:

    const globalModuleImports = moduleMetadata({
      imports: [RouterTestingModule, RouterModule, HttpClientModule],
      providers: [Router],
    });
    
    
    const setRoutesMetadata = (fn, c) => {
      const story = fn();
      story.moduleMetadata.providers.push(
        {
          provide: ENVIRONMENT_INITIALIZER, multi: true, useValue() {
            inject(Router).resetConfig(c.parameters?.routes || [])
          }
        }
      )
      return story;
    }
    
    export const decorators = [
      globalModuleImports,
      setRoutesMetadata
    ];
    

    and then in your story you can set routes inside a story parameters:

      SomeStory.parameters = {
        routes: [
          {
            path: "second",
            loadChildren: () => import('./second/second-routes'),
          },
        ]
      }