在Rails中使用jsbundling/esbuild时无法使用TS/JS装饰器

问题根源 #

你遇到的Invalid or unexpected token错误，核心原因是工具链重复转译导致冲突：typescript-rails和esbuild都具备TS编译能力，同时使用时，typescript-rails的转译输出没有正确处理装饰器语法，或者转译后的代码和esbuild的打包逻辑不兼容，最终导致@符号留在JS代码中，浏览器无法识别。

解决方案：移除typescript-rails，让esbuild全权处理TS #

1. 移除typescript-rails依赖 #

执行命令卸载gem：

bundle remove typescript-rails

同时删除项目中typescript-rails相关的配置文件（比如config/initializers/typescript.rb）。

2. 配置tsconfig.json支持Angular装饰器 #

在项目根目录创建或修改tsconfig.json，确保开启装饰器相关编译选项：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": false,
    "esModuleInterop": true
  },
  "include": ["app/javascript/**/*"]
}

3. 配置esbuild处理TS文件 #

jsbundling-rails搭配的esbuild默认支持TS文件编译，你只需要在app/javascript/application.js中导入Angular的TS入口文件即可，比如：

// app/javascript/application.js
import "./angular/main.ts"

4. 重新构建并运行 #

执行开发环境的打包命令：

bin/dev

或者生产环境预编译：

rails assets:precompile

额外说明 #

• 之前未安装typescript-rails时无法运行TS，是因为缺少正确的TS配置（比如tsconfig.json），而非esbuild不支持TS编译。
• Angular的模板、样式等资源可能需要额外配置esbuild插件处理，比如使用esbuild-plugin-angular来处理Angular的组件模板，但这属于Angular构建的进阶配置，核心解决装饰器错误的步骤是移除typescript-rails并配置好tsconfig.json。

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