Storybook 6.2与Angular 11集成使用templateUrl触发模板404未找到错误

当前的404报错本质是Storybook的构建流程没有正确适配Angular组件的外部独立模板、外部独立样式文件的编译逻辑，导致运行时直接向站点根路径请求未经过预编译处理的原始.component.html、.component.css文件，没有匹配到打包后的正确资源映射路径，最终触发资源不存在的异常。 #

解决方案 #

1. 匹配对应构建工具的配置修正 #

根据你项目使用的Storybook构建器，调整.storybook目录下的核心配置文件：

场景1：Webpack构建器（@storybook/angular默认内置构建器）

打开.storybook/main.ts/.storybook/main.js，在webpackFinal钩子里调整规则，避免默认的静态资源规则拦截Angular的组件外部文件：

• 移除Webpack规则中对.html文件的静态资源拷贝配置，让html文件可以被Angular编译器正常处理
  参考配置片段：

  const config = {
    framework: '@storybook/angular',
    webpackFinal: async (existingConfig) => {
      // 遍历现有webpack规则，调整拦截范围
      existingConfig.module.rules = existingConfig.module.rules.map(rule => {
        // 把原本拦截.html的静态资源规则，改成只拦截图片、字体等非组件类静态资源
        if (rule.test?.toString().includes('.html') && rule.type === 'asset/resource') {
          return {
            ...rule,
            test: /\.(svg|png|jpg|jpeg|gif|webp|ico|eot|otf|ttf|woff|woff2)$/
          }
        }
        return rule
      })
      return existingConfig
    }
  }
  

• 确认未在配置中额外添加把src目录下的组件html、css文件直接拷贝到Storybook站点根路径的规则，这类规则会和Angular的编译流程产生路径冲突。

场景2：Vite构建器（@storybook/builder-vite）

如果项目启用了Vite构建加速，需要确保Angular的Vite编译插件正确加载，并放开对组件外部文件的静态资源拦截：

• 首先确保安装了@analogjs/vite-plugin-angular依赖，用于处理Angular组件的外部资源解析
• 在viteFinal钩子中调整配置，参考片段：

  import angular from '@analogjs/vite-plugin-angular'
  const config = {
    framework: '@storybook/angular',
    viteFinal: async (existingConfig) => {
      // 把Angular编译插件放在插件列表最前端
      existingConfig.plugins = [angular(), ...existingConfig.plugins]
      // 移除Vite默认对.html文件的静态资源拦截规则
      existingConfig.assetsInclude = (existingConfig.assetsInclude || []).filter(item => {
        return !(item instanceof RegExp && item.source.includes('.html'))
      })
      return existingConfig
    }
  }
  

2. 检查路径引用的正确性 #

确认组件装饰器内的templateUrl、styleUrls路径是相对于当前组件.ts文件所在目录写的：

• 当refresh-button.component.ts和对应的html、css文件在同一层级目录下，写./refresh-button.component.html是正确的，不要使用基于项目根目录的绝对路径引用。

3. 缓存清理验证 #

配置调整完成后，需要清理旧的打包缓存后再重启Storybook服务，避免旧缓存影响配置生效：

• 停掉当前运行的Storybook进程
• 删除项目根目录下node_modules/.cache、.storybook/node_modules两个缓存目录
• 重新执行Storybook启动命令验证效果

补充验证效果：配置生效后，组件的外部模板、样式文件会被Angular编译器在构建阶段直接内联到组件的元数据中，不会再产生运行时的独立文件请求，自然也就不会出现404报错。

内容的提问来源于stack exchange，提问作者Aaron Salazar