@NX/Angular应用Chrome正常运行，Safari无法启动求助

1. 检查依赖包的重复引入 #

• 项目可能间接依赖了@angular/cdk的多个版本，或在Nx monorepo的不同package中重复安装了CDK。执行命令查看依赖树：

  npm ls @angular/cdk
  # yarn环境用以下命令
  yarn list @angular/cdk
  

• 若发现多版本共存，统一依赖版本后删除package-lock.json/yarn.lock，重新安装依赖。

2. 排查Nx monorepo的模块配置问题 #

• 检查是否在多个Nx library或应用模块中重复导入了ScrollingModule（来自@angular/cdk/scrolling）。该模块会导出CdkVirtualScrollViewport组件，重复导入会触发组件ID生成冲突。
• 确保ScrollingModule仅在共享模块中导入一次，其他模块通过导入共享模块使用相关功能，避免重复注册组件。

3. 处理Safari特有的缓存与编译问题 #

• Safari缓存策略比Chrome更激进，先清除浏览器缓存（Cmd+Opt+E），再硬刷新页面（Cmd+Opt+R）测试。
• 重新构建生产版本，排查编译产物重复问题：

  nx build your-app-name --prod
  

• 检查tsconfig.json的angularCompilerOptions，确保enableIvy配置在全项目中一致，避免混合使用Ivy与View Engine导致的冲突。

4. 排查第三方UI库的间接依赖 #

• 若使用了Angular Material、NG-ZORRO等第三方UI库，它们可能内部依赖@angular/cdk/scrolling。检查这些库的版本是否与项目中@angular/cdk版本匹配，版本不兼容可能引发组件重复注册。
• 临时移除第三方UI库，逐步排查是哪个库导致的冲突。

5. 临时修复：强制修改组件ID #

• 若以上方法无效，可临时通过代码强制修改组件ID：

  import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
  
  CdkVirtualScrollViewport.ɵcmp.id = 'unique-cdk-virtual-scroll-viewport-id';
  

• 注意：这是临时方案，找到根本原因后建议移除，避免后续版本兼容问题。

6. 检查Nx构建优化配置 #

• 查看nx.json中targets.build.options的vendorChunk、commonChunk等配置，避免重复打包CDK模块。
• 尝试禁用构建优化后测试：

  nx build your-app-name --prod --optimization=false
  

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