升级Angular v12与Storybook v6.3.13后组件模板HTTP请求404问题

问题描述 #

升级Angular至v12、Storybook至v6.3.13后，访问Storybook时出现组件模板的HTTP请求返回404错误，但在Storybook v5.3版本中无此现象。

环境依赖 #

{
  "@storybook/angular/webpack": "^5",
  "@angular/cli": "^12.2.18",
  "storybook": "6.3.13",
  "typescript": "4.3.5",
  "@storybook/angular": "6.3.13",
  "@storybook/builder-webpack5": "6.3.13",
  "@storybook/manager-webpack5": "6.3.13",
  "webpack": "^5.88.2"
}

相关配置 #

.storybook/main.js #

module.exports = {
    staticDirs: ['../dist/ui-kit', '../src/assets'],
    stories: ['../src/**/*.stories.ts'],
    framework: {name: '@storybook/angular'},
    core: {
        builder: 'webpack5',
    },
};

angular.json（ui-kit项目配置） #

"ui-kit": {
  "root": "projects/ui-kit",
  "sourceRoot": "projects/ui-kit/src",
  "projectType": "library",
  "prefix": "lib",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:ng-packagr",
      "options": {
        "tsConfig": "projects/evo-ui-kit/tsconfig.lib.json",
        "project": "projects/evo-ui-kit/ng-package.json"
      }
    }
  }
}

解决方案 #

1. 移除冲突依赖 #

环境依赖中@storybook/angular/webpack": "^5"为Storybook v5版本的webpack适配包，与当前使用的Storybook 6.3.13 + Webpack 5存在版本冲突，直接删除该依赖项，然后重新执行npm install或yarn install。

2. 确保Angular库模板正确打包 #

检查projects/evo-ui-kit/ng-package.json配置，确保模板文件被正确内嵌或打包到产物中：

• 添加assets字段包含所有模板文件，确保构建时模板被复制到dist目录
• 启用模板内嵌（推荐），设置inlineStyleLanguage并确保组件的templateUrl在构建时被转换为内嵌的template

示例ng-package.json配置：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ui-kit",
  "lib": {
    "entryFile": "src/public-api.ts",
    "inlineStyleLanguage": "scss",
    "assets": [
      "**/*.html"
    ]
  }
}

3. 验证Storybook静态资源配置 #

确认staticDirs中的../dist/ui-kit是Angular库构建后的正确产物路径，执行ng build ui-kit重新构建库，确保dist/ui-kit目录下包含组件模板文件（如果未使用内嵌模板）。

4. 清理缓存并重新构建 #

• 删除node_modules、dist、.storybook/out目录
• 重新安装依赖：npm install
• 重新构建UI库：ng build ui-kit
• 启动Storybook：npm run storybook

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