Unable to configure story for module with RouterLink

[Adam-Michalski]

Describe the bug 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: https://github.com/Adam-Michalski/theme-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 sam 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.

[Fasosnql]

I don't understand why navbar is a module? But anyway, it can't work in that way that you're importing router module inside navbarModule which is importing to story. I would propose you to delete navbar.module and keep it just as a component, but still - if you need as a module then in your story you should just import RouterTestingModule and declare component:

moduleMetadata({
      declarations: [NavbarComponent],
      imports: [RouterTestingModule],
}),

[ArmughanALi]

ERROR NullInjectorError: "StaticInjectorError(DynamicModule)[RouterOutlet -> ChildrenOutletContexts]: StaticInjectorError(Platform: core)[RouterOutlet -> ChildrenOutletContexts]: NullInjectorError: No provider for ChildrenOutletContexts!"

how can i solve it.....

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[Alex-hv]

Same for me

[jpzwarte]

I have it working. In case somebody wants to know how:

import { APP_BASE_HREF } from '@angular/common';
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { moduleMetadata, Meta, Story } from '@storybook/angular';
import { TabsModule } from './tabs.module';

@Component({ template: 'Lorem' })
export class LoremComponent {}

@Component({ template: 'Ipsum' })
export class IpsumComponent {}

@Component({ template: 'Dolar' })
export class DolarComponent {}

export const routes: Routes = [
  { path: 'lorem', component: LoremComponent },
  { path: 'ipsum', component: IpsumComponent },
  { path: 'dolar', component: DolarComponent }
];

export default {
  title: 'Navigation/Tabs',
  decorators: [
    moduleMetadata({
      imports: [TabsModule, RouterModule.forRoot(routes, { useHash: true })],
      declarations: [LoremComponent, IpsumComponent, DolarComponent],
      providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    }),
  ]
} as Meta;

export const API: Story = () => ({
  template: `
    <dna-tab-bar>
      <dna-tab-button routerLink="/lorem">Lorem</dna-tab-button>
      <dna-tab-button routerLink="/ipsum">Ipsum</dna-tab-button>
      <dna-tab-button routerLink="/dolar" disabled>Dolar</dna-tab-button>
    </dna-tab-bar>
    <router-outlet></router-outlet>
  `
});

[gklandes]

@jpzwarte Thanks, for the help.

I found that Storybook added entries for the exported components and routes. Just removing the "export" on those items fixed that; I only needed to export "default" and the story.