Angular12+Universal构建服务端包提示Strict mode code may not include a with statement错误

原因说明 #

该报错是因为Angular 12默认启用ECMAScript严格模式，而ServerModule关联的编译逻辑引入了包含with语句的代码块，严格模式下禁止使用with语句。你之前移除renderModule相关导出的方案只适用于特定导出触发的场景，无法解决模块导入触发的编译问题。

可执行修复步骤 #

• 第一步：升级对应依赖版本到适配Angular 12的最新小版本，执行命令：
  npm i @angular/platform-server@12.x @nguniversal/express-engine@12.x --save
  若使用yarn包管理器可对应调整命令。
• 第二步：调整服务端构建的编译配置，打开tsconfig.server.json，在compilerOptions中添加如下配置：

"noImplicitUseStrict": true,
"allowSyntheticDefaultImports": true

• 第三步：打开angular.json，找到你项目对应的server构建配置节点，在configurations.production（以及你正在使用的开发配置）下修改optimization配置：

"optimization": {
  "scripts": false,
  "styles": true,
  "fonts": true
}

该修改会关闭服务端bundle的脚本压缩优化，避免压缩过程中错误生成with语句。

• 第四步：检查项目中的第三方依赖是否存在包含with语句的代码，如果有可以在angular.json的server配置下添加allowedCommonJsDependencies字段，把对应依赖加入列表，跳过针对这些依赖的严格编译检查。

验证方法 #

配置修改完成后重新执行服务端构建命令，保留ServerModule的引入，确认构建是否正常完成。

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