Angular 5服务端渲染报错Already loaded patch: ZoneAwarePromise 求解

我之前在Angular 5做SSR开发时也碰到过一模一样的问题，给你梳理下问题原因和可行的解决办法：

• Zone.js被重复打包/引入：Angular SSR的服务端打包（server bundle）和客户端打包（browser bundle）如果同时把Zone.js打包进去，或者webpack配置没做好隔离，就会导致server.js里出现重复的Zone代码片段。Zone.js在加载时会主动检查是否已经为ZoneAwarePromise打过补丁，重复加载就会触发这个报错。
• polyfills.ts的引入未区分环境：虽然你在polyfills.ts里引入了Zone.js，但服务端是Node环境，不需要Zone的浏览器相关补丁，若没做环境判断就全量引入，会和服务端打包过程中意外混入的Zone代码冲突。

1. 配置服务端webpack排除Zone.js
   打开你的webpack.server.config.js，把Zone.js设置为外部依赖，避免webpack将其打包进server bundle：

   module.exports = {
     // 其他配置...
     externals: {
       'zone.js': 'Zone'
     }
   };
   

2. 在polyfills.ts里做环境判断
   只在浏览器环境下加载Zone.js，服务端环境跳过：

   // polyfills.ts
   if (typeof window !== 'undefined') {
     import 'zone.js/dist/zone'; // 仅客户端加载Zone.js
   }
   

3. 排查重复引入的来源
   检查项目中的第三方依赖、自定义服务端启动脚本（比如server.ts），确认是否有其他地方重复引入了Zone.js，找到后移除多余的引用。

4. 重新打包并验证
   执行项目的SSR打包命令（比如npm run build:ssr），打包完成后检查dist/server.js是否还存在重复的Zone代码，之后重启服务端测试是否还会报错。

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