Angular 17项目用tsl-mastodon-api遇顶层await环境不支持错误

问题分析 #

虽然ES2022支持顶层await，且你指定的目标浏览器版本也原生支持，但Angular默认不会转译node_modules内的代码，导致库中的顶层await代码未被构建工具（ESBuild）正确处理，触发兼容性报错。

解决方案 #

1. 强制ESBuild转译该依赖库 #

在angular.json中找到你的项目配置，修改architect.build.options，添加esbuildOptions明确指定目标版本并处理该库：

"architect": {
  "build": {
    "options": {
      // 其他配置...
      "esbuildOptions": {
        "target": "es2022",
        "resolveExtensions": [".ts", ".js"],
        "allowOverwrite": true
      }
    }
  }
}

2. 允许该CommonJS依赖 #

如果库是CommonJS格式，在angular.json的build.options中添加allowedCommonJsDependencies：

"build": {
  "options": {
    // 其他配置...
    "allowedCommonJsDependencies": [
      "tsl-mastodon-api",
      "node-fetch"
    ]
  }
}

3. 改用动态导入规避顶层await #

修改项目中导入tsl-mastodon-api的代码，用异步动态导入包裹：

async function initializeMastodon() {
  const { default: MastodonApi } = await import('tsl-mastodon-api');
  // 在这里初始化和使用API
}

// 在应用初始化时调用
initializeMastodon();

4. 升级依赖库版本 #

检查tsl-mastodon-api是否有更新版本，新版本可能已修复顶层await的兼容性问题。执行以下命令升级：

npm update tsl-mastodon-api

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