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?
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'),
},
]
}