Angular storybook Error: Cannot match any routes. URL Segment: 'iframe.html'

Question

I'm trying to configure storybook project and get strange error. Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'iframe.html'

Error: Cannot match any routes. URL Segment: 'iframe.html'
    at ApplyRedirects.noMatchError (router.js:1719)
    at CatchSubscriber.selector (router.js:1684)
    at CatchSubscriber.error (catchError.js:104)
    at MapSubscriber.Subscriber._error (Subscriber.js:132)
    at MapSubscriber.Subscriber.error (Subscriber.js:106)
    at MapSubscriber.Subscriber._error (Subscriber.js:132)
    at MapSubscriber.Subscriber.error (Subscriber.js:106)
    at MapSubscriber.Subscriber._error (Subscriber.js:132)
    at MapSubscriber.Subscriber.error (Subscriber.js:106)
    at LastSubscriber.Subscriber._error (Subscriber.js:132)
    at ApplyRedirects.noMatchError (router.js:1719)
    at CatchSubscriber.selector (router.js:1684)
    at CatchSubscriber.error (catchError.js:104)
    at MapSubscriber.Subscriber._error (Subscriber.js:132)
    at MapSubscriber.Subscriber.error (Subscriber.js:106)
    at MapSubscriber.Subscriber._error (Subscriber.js:132)
    at MapSubscriber.Subscriber.error (Subscriber.js:106)
    at MapSubscriber.Subscriber._error (Subscriber.js:132)
    at MapSubscriber.Subscriber.error (Subscriber.js:106)
    at LastSubscriber.Subscriber._error (Subscriber.js:132)
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:781)
    at zone.js:883
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4736)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask (zone.js:500)
    at ZoneTask.invoke (zone.js:485)

Why it happens and how to fix?

story:

storiesOf('MY_PROJECT', module)
  .addDecorator(withKnobs)
  .addDecorator(
    moduleMetadata({
      imports: [
        HttpClientModule,
        LocalizationModule.forRoot(l10nConfig),
        LocaleValidationModule.forRoot(),
        RouterModule.forRoot([{
          path: '',
          component: InventoryComponent,
          pathMatch: 'full'
        }]),
        FormsModule,
        ReactiveFormsModule
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      declarations: [InventoryComponent],
      providers: [{ provide: APP_BASE_HREF, useValue : '' }],
    })
  )

MY_PROJECT is a git submodule and it have is's own little routing like this

export const appRoutes: Routes = [
  {
    path: '',
    component: InventoryComponent,
  }
];

Answer 1

A simple fix is to use hash strategy for storybook specifically. For example:

storiesOf('story', module)
  .addDecorator(
    moduleMetadata({
      declarations: [],
      imports: [
        CommonModule,
        RouterModule.forRoot([], { useHash: true }),
      ],
    })
  )
  .add('component', () => ({
    component: MyComponent
  }));

Answer 2

I've added { path: 'iframe.html', component: InventoryComponent } to moduleMetadata's RouterModule and now I don't get this error anymore. Something related to storybook routing, I guess.