RouterLink import for component

[tony84120]

Summary

Hi,

I want to create my storybook file for my component which use routerLink.

I tested many solutions for mandatory imports:

// it works but is using RouterTestingModule which is deprecated
moduleMetadata({ imports: [ IconModule, RouterTestingModule ], })

// following the documentation, we should use the provideRouter([]) function but it doesn't work

moduleMetadata({ imports: [ IconModule, ], providers: [provideRouter([])] })

the obtained syntax error :

"Argument type {imports: IconModule[], providers: EnvironmentProviders[]} is not assignable to parameter type Partial "

Can you explain me, what's is wrong on this implementation?

Thanks

Additional information

Angular V18.0.5
Storybook V8.1.11

Create a reproduction

No response

[Marklb]

provideRouter works, but it is only for the application root. Angular used to not complain about RouterModule.forRoot() not being called in the root module, even though it was only supposed to be called there, but newer versions that bootstrap a root Component, instead of NgModule, are more strict about it be in the right place.

Since provideRouter returns EnvironmentProviders, it has to be in the applicationConfig. Storybook has a separate decorator for that.

import { applicationConfig, Meta, moduleMetadata, Story } from '@storybook/angular'
import { provideRouter, withHashLocation } from '@angular/router'

export default {
  decorators: [
    applicationConfig({
      providers: [
        // The router is most likely going to interfere with your Storybook application/iframe
        // route, but hash routes should be fine, so I also add `withHashLocation`.
        provideRouter([ ...routes ], withHashLocation()),
      ],
    })
  ],
}

[jkoervers]

I implemented it the way you proposed and I don't get any errors. What I don't understand is, will the path actually change and render a different component when clicking for example on a link component in a story? Or do we add this only to prevent error messages?

[Marklb]

@jkoervers Yes, but if everything is using Angular's router then provideLocationMocks is probably better than hash routes. This discussion has more details: #28724