javascript - Angular 故事书错误 : Cannot match any routes. URL 段: 'iframe.html'

Question

我正在尝试配置故事书项目并遇到奇怪的错误。错误:未捕获( promise ):错误:无法匹配任何路线。网址段:'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
  }));