Angular4升级Angular6后SSR构建失败问题求助

看起来你遇到的问题核心是枚举的valueOf()调用在SSR构建流程中生成了无效的JavaScript语法，导致webpack无法解析。结合你的代码和配置，我整理了几个关键的解决步骤：

1. 移除枚举冗余的valueOf()调用 #

你的原代码中，枚举成员本身就是数值类型（比如ConnectionServiceEnum.testOne的值就是0），完全不需要调用valueOf()来获取它的数值。TS 2.3可能对这种冗余调用兼容性较好，但升级到TS 2.7+后，在SSR的webpack编译链中，这种写法会被转成无效的..valueOf()语法（就是你错误信息里的_a[0 /* testOne */..valueOf()]），触发解析错误。

修改Connection类里的对象字面量：

export class Connection {
  private static readonly ConnectionsDev: { [serviceName: number]: string } = {
    [ConnectionServiceEnum.testOne]: 'http://localhost:59384/api/testOne',
    [ConnectionServiceEnum.testTwo]: 'http://localhost:59384/api/testTwo',
    [ConnectionServiceEnum.testThree]: 'http://localhost:59384/api/testThree'
  };
}

这一步应该能直接解决你当前看到的Unexpected token错误。

2. 验证TS Server配置的正确性 #

检查tsconfig.server.json的几个关键配置：

• 确保compilerOptions.module是commonjs（你的配置已经满足，Node.js环境需要CommonJS模块）
• 确认angularCompilerOptions.entryModule路径正确，指向你的AppServerModule（你的配置app/app.server.module#AppServerModule看起来没问题）
• 如果你之前修改过src目录结构，要确保baseUrl配置和实际路径匹配

3. 检查Webpack Server配置（关键！） #

你没贴出webpack.server.config.js，但SSR构建失败很多时候是因为webpack没有正确处理TypeScript文件。确保你的webpack配置使用了正确的loader，并且指向了tsconfig.server.json：

一个标准的Angular6 SSR webpack配置示例：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: { server: './server.ts' },
  resolve: { extensions: ['.ts', '.js'] },
  target: 'node',
  mode: 'none',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { 
        test: /\.ts$/, 
        loader: 'ts-loader', 
        options: { configFile: 'tsconfig.server.json' } 
      }
    ]
  },
  plugins: [
    // 避免Angular核心模块的上下文错误
    new webpack.ContextReplacementPlugin(
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'),
      {}
    ),
    // 处理Express模块的上下文问题
    new webpack.ContextReplacementPlugin(
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
};

这个配置确保webpack用ts-loader处理TS文件，并且使用server端专属的tsconfig。

4. 确认Angular CLI的App配置 #

Angular6使用angular.json代替了旧版的.angular-cli.json，要确保你的angular.json中包含了server端的应用配置：

"projects": {
  "your-app-name": {
    "architect": {
      "build": {
        "configurations": {
          "production": { ... }
        }
      },
      "server": {
        "builder": "@angular-devkit/build-angular:server",
        "options": {
          "outputPath": "dist/server",
          "main": "src/main.server.ts",
          "tsConfig": "src/tsconfig.server.json"
        },
        "configurations": {
          "production": { ... }
        }
      }
    }
  }
}

这样ng build --prod --app 1才能正确找到server端的构建配置。

额外建议 #

如果升级到TS 2.8.3有更多错误，建议先解决当前的SSR构建问题后，再逐步处理那些错误——通常是TS新版本对类型检查更严格导致的，比如隐式any类型、过时语法等，可以根据错误提示逐个修复。

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