Angular Universal构建错误：服务器包模块解析失败

问题概述 #

使用Angular 12并启用服务器端渲染（SSR），执行ng build常规构建无报错，但运行SSR构建命令build:ssr（ng build && ng run angular-nats-app:server）时，浏览器包构建正常，服务器包抛出模块解析错误，错误指向nats.ws包中的for await (const b of _this12.transport)语法。

已按nats.ws文档调整tsconfig，且将常规构建目标版本改为ES2017及以上，问题仍未解决。

环境信息 #

• Angular CLI: ~12.0.0
• Node: 14.21.3
• OS: Windows 11
• 包管理器: npm

错误日志 #

./node_modules/nats.ws/esm/nats.js:7472:16 - Error: Module parse failed: Unexpected token (7472:16)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
|         _asyncToGenerator(function* () {
|           try {
>             for await (const b of _this12.transport) {
|               _this12.parser.parse(b);
|             }

解决方案 #

1. 配置服务器构建的额外Webpack规则 #

Angular 12的服务器构建默认不转译node_modules内的包，需手动配置让构建工具处理nats.ws：

• 在项目根目录创建webpack.server.config.js文件，添加转译规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        include: /node_modules\/nats\.ws/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { targets: { node: '14' } }]]
          }
        }
      }
    ]
  }
};

• 修改angular.json中的服务器构建配置，引入上述文件：

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/server",
    "main": "server.ts",
    "tsConfig": "tsconfig.server.json",
    "extraWebpackConfig": "./webpack.server.config.js"
  }
}

2. 调整服务器端TS配置 #

修改tsconfig.server.json，确保编译目标支持for await...of语法：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "target": "ES2018",
    "module": "CommonJS",
    "outDir": "./out-tsc/server",
    "types": ["node"]
  },
  "files": ["server.ts", "src/main.server.ts"],
  "angularCompilerOptions": {
    "entryModule": "./src/app/app.server.module#AppServerModule"
  }
}

3. 安装依赖包 #

执行以下命令安装必要的Babel工具：

npm install --save-dev babel-loader @babel/core @babel/preset-env

4. 修正导入路径 #

确保代码中导入nats.ws的CommonJS版本，避免直接导入未转译的ES模块：

// 正确导入方式
import { connect } from 'nats.ws/nats';

// 避免使用
// import { connect } from 'nats.ws/esm/nats.js';

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