Angular 16升级至17后SSR出现express()识别错误求助

server.ts.bak 文件用途 #

• server.ts.bak 是Angular升级schematics自动生成的备份文件，保存了升级前server.ts的原始代码。如果升级后出现问题，可以用这个文件回滚到之前的版本；确认升级无异常后，直接删除该文件即可。

express() 无法识别的修复方案 #

Angular 17对SSR架构做了调整，默认使用@angular/ssr替代旧的@nguniversal系列包，这是导致express()识别错误的核心原因，按以下步骤修复：

1. 安装/更新依赖
   执行命令安装必要的依赖包：

   npm install @angular/ssr express
   

   同时卸载旧的@nguniversal相关包（如果之前安装过）：

   npm uninstall @nguniversal/express-engine @nguniversal/builders
   

2. 修正server.ts的导入与代码
   Angular 17的server.ts需要使用ES模块导入，并适配新的ngExpressEngine，示例代码如下：

   import express from 'express';
   import { join } from 'path';
   import { existsSync } from 'fs';
   import { APP_BASE_HREF } from '@angular/common';
   import { ngExpressEngine } from '@angular/ssr';
   import { AppServerModule } from './src/main.server';
   
   const app = express();
   const port = process.env['PORT'] || 4000;
   const distFolder = join(process.cwd(), 'dist/your-project-name/browser');
   const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
   
   // 配置Angular SSR引擎
   app.engine('html', ngExpressEngine({
     bootstrap: AppServerModule,
   }));
   
   app.set('view engine', 'html');
   app.set('views', distFolder);
   
   // 静态资源服务
   app.get('*.*', express.static(distFolder, {
     maxAge: '1y'
   }));
   
   // 处理所有路由请求
   app.get('*', (req, res) => {
     res.render(indexHtml, {
       req,
       providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }]
     });
   });
   
   app.listen(port, () => {
     console.log(`Node Express server listening on http://localhost:${port}`);
   });
   

   注意替换your-project-name为你的项目名称，同时检查你的server.ts是否存在导入错误（比如仍在引用@nguniversal/express-engine）。

3. 调整TypeScript配置
   打开tsconfig.server.json，确保compilerOptions配置正确：

   {
     "extends": "./tsconfig.json",
     "compilerOptions": {
       "module": "NodeNext",
       "target": "ES2022",
       "outDir": "./out-tsc/server",
       "types": ["node"]
     },
     "files": [
       "src/main.server.ts",
       "server.ts"
     ]
   }
   

   确保types包含node，这样TypeScript能识别express的类型定义。

4. 重新生成SSR配置（可选）
   如果上述步骤仍有问题，可以直接重新生成符合Angular 17规范的SSR文件：

   ng add @angular/ssr
   

   该命令会自动覆盖现有server.ts、main.server.ts等文件，并配置好正确的依赖。

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