Angular 故事书错误：无法匹配任何路线。 URL 段：'iframe.html'

Question

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

添加到

moduleMetadata

的

RouterModule

，现在我不再收到此错误。我猜与故事书路由有关。

Answer 3

无论您在何处配置路由，请添加通配符路由来处理任何不匹配的路由。

export const routes: Routes = [
  ...
  { path: '**', redirectTo: '', pathMatch: 'full' },
];

通配符路由

**

捕获任何与现有路由不匹配的URL段并重定向它们。