Angular应用ES6导入DOMPurify在SSR下报错的问题

报错原因 #

DOMPurify v3采用ES模块默认导出，但Angular SSR的Node.js环境模块解析逻辑更严格，import * as DOMPurify会尝试读取命名导出，而该模块仅提供default导出，导致SSR阶段抛出导出不存在的错误；浏览器CSR环境模块解析更宽松，所以能正常运行。

符合Angular规范的ES6导入方案 #

直接使用默认导入替代命名空间导入，这是ES6标准语法，也符合Angular的最佳实践：

import DOMPurify from 'dompurify';

使用这种方式后，CSR和SSR都能正确识别DOMPurify的默认导出，正常调用DOMPurify.sanitize()方法。

额外优化（可选） #

如果TypeScript类型检查报错，可在项目根目录的tsconfig.json中启用esModuleInterop选项，让TypeScript更好地兼容CommonJS模块的默认导出：

{
  "compilerOptions": {
    "esModuleInterop": true,
    // 其他配置...
  }
}

关于require的使用 #

const DOMPurify = require('dompurify')能运行是因为Node.js的CommonJS模块系统会返回模块的完整exports对象，但Angular官方更推荐使用ES6导入语法，所以优先采用默认导入的方式。

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