配置Angular Storybook时出现路由匹配错误：无法匹配'iframe.html'

这个问题在Angular + Storybook的项目里挺常见的，本质是Angular的路由系统没识别Storybook加载组件时用到的iframe.html路径，导致路由匹配失败。下面给你几个靠谱的解决办法：

方法1：在AppRoutingModule里添加通配路由 #

在你的app-routing.module.ts中，添加一个匹配所有未定义路由的规则，把它指向你的主组件或者一个空组件（避免影响正常路由）：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { YourMainComponent } from './your-main/your-main.component';

const routes: Routes = [
  // 你的其他路由配置...
  { path: '**', component: YourMainComponent } // 通配路由，必须放在最后
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

注意：这个通配路由一定要放在所有路由的最后，不然会覆盖前面的正常路由规则。

方法2：在Storybook的preview.js中禁用Angular路由 #

如果你不需要在Storybook里测试路由相关的组件，可以直接在.storybook/preview.js中添加配置，阻止Angular路由初始化：

import { setCompodocJson } from '@storybook/addon-docs/angular';
import docJson from '../documentation.json';
setCompodocJson(docJson);

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  // 添加这段配置禁用路由
  angularRouter: {
    disable: true
  }
};

这样Storybook就不会触发Angular的路由系统，自然也就不会出现路由匹配错误了。

方法3：为iframe.html添加专属路由 #

如果需要在Storybook中保留路由功能，也可以专门为iframe.html添加一个路由规则，比如指向一个空组件：

// 先创建一个空组件，比如EmptyComponent
const routes: Routes = [
  // 你的其他路由配置...
  { path: 'iframe.html', component: EmptyComponent },
  { path: '**', component: YourMainComponent }
];

这个方法适合需要测试带路由的组件，但又不想让iframe路径干扰的场景。

最后提醒下，修改配置后记得重启Storybook，确保新配置生效哦！

内容的提问来源于stack exchange，提问作者K.Rice