How to configure storybook story for module with RouterLink

Question

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

Answer 1

I made the following changes:

1. Adding the RouterModule including the the routes array (used to define your routes)
2. Provide the required APP_BASE_HREF.

navbar.module.ts

const routes: Routes = [];


@NgModule({
  declarations: [NavbarComponent],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  providers: [{provide: APP_BASE_HREF, useValue: '/'}],
  exports: [NavbarComponent]
})
export class NavbarModule {
}

After that you just need to add the <router-outlet></router-outlet> into your NavbarComponent

Answer 2

Storybook works different than angular so I dont need to inject FeatureModule into story, Component is just fine. When only NavbarComponent is injected with RouterTestingModule

story configuration looks like this

storiesOf('Navbar', module)
  .addDecorator(
    moduleMetadata({
      imports: [BrowserAnimationsModule, RouterTestingModule],
      declarations: [NavbarComponent],
    }),
  )

And you don't need routes configuration xD