Angular 19 SSR中直接连接MongoDB时whatwg-url报错求助

问题描述 #

正在将代码迁移至SSR+客户端混合渲染的Angular 19新项目，期望在服务端渲染阶段直接查询MongoDB而非调用API，但初始化MongoClient时触发了源自whatwg-url的TypeError: Cannot convert undefined or null to object错误，远程和本地数据库均会触发该问题。

代码示例 #

const mongoClient = new MongoClient(
  config.CONNECTION_STRING,
  {
    tls: true,
    tlsCAFile: join(process.cwd(), 'files', config.TLS_FILE),
  }
);
const client = await mongoClient.connect();
return client.db();

错误信息 #

TypeError: Cannot convert undefined or null to object
    at Function.getPrototypeOf (<anonymous>)
    at node_modules/whatwg-url/lib/utils.js (.../mongodb.js:20203:41)
    ... (完整堆栈信息见原问题)

已尝试方案 #

• 更新whatwg-url依赖（参考同类型Angular 17 SSR问题的处理建议）
• 验证MongoDB连接字符串正确性（本地数据库仍报错）
• 在Angular Express服务器和Angular服务中分别测试，错误表现一致

兼容性分析与解决方法 #

1. 标记MongoDB相关依赖为Vite SSR外部包 #

Angular 19基于Vite构建，SSR时可能错误地将Node.js环境的依赖按浏览器端规则编译。需在vite.config.ts中将MongoDB及其关联依赖标记为外部包，让它们直接在Node环境中运行：

import { defineConfig } from 'vite';
import angular from '@analogjs/vite-plugin-angular';

export default defineConfig({
  plugins: [angular()],
  ssr: {
    external: ['mongodb', 'whatwg-url', 'bson']
  }
});

2. 严格隔离服务端代码与客户端代码 #

确保MongoDB相关逻辑仅在服务端执行，避免客户端代码意外加载依赖。可通过Angular的isPlatformServer进行环境判断：

import { isPlatformServer } from '@angular/common';
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { MongoClient } from 'mongodb';
import { join } from 'path';

@Injectable({ providedIn: 'root' })
export class MongoService {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  async getDb() {
    if (!isPlatformServer(this.platformId)) {
      throw new Error('MongoDB连接仅允许在服务端执行');
    }
    
    const mongoClient = new MongoClient(
      config.CONNECTION_STRING,
      {
        tls: true,
        tlsCAFile: join(process.cwd(), 'files', config.TLS_FILE),
      }
    );
    const client = await mongoClient.connect();
    return client.db();
  }
}

3. 降级MongoDB驱动版本 #

部分新版MongoDB驱动与Vite SSR存在兼容性冲突，可尝试降级至稳定兼容版本，例如mongodb@6.3.0：

npm install mongodb@6.3.0

4. 补充Node.js全局变量Polyfill #

若因Vite SSR环境缺失Node.js全局对象导致报错，可在server.ts中手动补充：

import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import { fileURLToPath } from 'url';
import { dirname, join, resolve } from 'path';
import bootstrap from './src/main.server';

// 补充whatwg-url所需的全局对象
globalThis.URL = require('url').URL;
globalThis.URLSearchParams = require('url').URLSearchParams;

// 剩余server.ts原有代码...

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