基于Angular的Excel Addin配置Shared Runtime时提示dist/functions.json不存在

核心原因是静态资源服务路径与manifest配置不匹配，虽然webpack构建后dist目录存在functions.json，但Office客户端和浏览器无法通过请求路径访问到该资源，具体可细分为三类问题：

1. webpack devServer配置错误：你当前配置的static: [__dirname]是将项目根目录作为静态资源服务根目录，webpack构建产物默认输出到dist目录下，若请求路径未带/dist前缀就会返回404，和你浏览器访问报错的现象完全吻合。
2. manifest资源路径不匹配：如果manifest中自定义函数扩展点下的functions.json资源URL配置为根路径（如https://localhost:3000/functions.json），和实际可访问路径不一致，就会触发资源找不到的报错。
3. 自定义函数元数据生成配置错误：你项目使用Typescript开发，但CustomFunctionsMetadataPlugin的input配置的是.js后缀的文件，如果你的自定义函数实际是用TS编写的，会导致生成的functions.json内容异常。

• 执行生产构建命令，查看dist目录的文件结构，确认functions.json是否直接放在dist根目录，没有嵌套路径
• 启动devServer后，分别访问https://localhost:3000/functions.json和https://localhost:3000/dist/functions.json，确认哪个路径可以正常返回JSON内容
• 核对manifest文件中自定义函数扩展点下的functions.jsonURL配置，和可正常访问的路径是否完全一致

1. 修正webpack基础配置 #

首先在webpack配置顶部引入path模块：

const path = require("path");

补全output的输出路径配置：

output: {
    path: path.resolve(__dirname, 'dist'),
    devtoolModuleFilenameTemplate: "webpack:///[resource-path]?[loaders]",
    clean: true,
},

修改devServer的静态资源目录为dist目录：

devServer: {
    static: {
        directory: path.join(__dirname, 'dist'),
    },
    headers: {
        "Access-Control-Allow-Origin": "*",
    },
    https: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
    port: process.env.npm_package_config_dev_server_port || 3000,
}

2. 修正自定义函数元数据生成配置 #

如果你的自定义函数是TS编写的，将CustomFunctionsMetadataPlugin的input路径修改为对应的.ts文件路径：

new CustomFunctionsMetadataPlugin({
    output: "functions.json",
    input: "./src/functions/functions.ts", // 替换为你实际的TS函数文件路径
}),

3. 核对manifest路径配置 #

确保manifest中自定义函数的functions.json资源URL，开发环境配置为https://localhost:3000/functions.json，生产环境替换为对应的生产域名路径即可。

4. 共享运行时配置校验 #

确认manifest中已经完成共享运行时的绑定配置：

• 在<Host xsi:type="Workbook">节点下添加<Runtimes>节点，指定共享运行时的ID、生命周期和对应的加载页面
• 自定义函数、 ribbon命令的运行时配置都指向同一个共享运行时ID

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