角度故事书错误：无法匹配任何路线。网址段：“ iframe.html”

Question

我正在尝试配置故事书项目并收到奇怪的错误。错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：“ 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)

为什么会发生以及如何解决？

故事：

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 是一个git子模块，它具有这样的自己的小路由

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

Answer 1

一个简单的解决方法是专门针对故事书使用哈希策略。例如：

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

Answer 2

我已经添加了{ path: 'iframe.html', component: InventoryComponent }' moduleMetadatas RouterModule，现在我不再收到此错误了。我猜是与故事书路由有关的东西。