Angular中Syncfusion GridComponent、@agm/core执行ng build部署后失效问题

本地ng serve和生产ng build的运行环境存在本质差异，该类问题90%以上由以下三类原因导致：生产构建摇树优化误删依赖、模块导入规则不符合生产要求、Nginx部署配置不匹配。

• 校验模块导入规则
  确认GridModule从@syncfusion/ej2-angular-grids完整导入并加入根模块/对应特性模块的imports数组，不可仅在组件providers中声明。@agm/core的AgmCoreModule.forRoot()配置必须写在根模块的imports数组中，禁止写在子模块内，生产摇树会自动清除子模块内的全局配置项。
• 排查构建优化问题
  先执行ng build --configuration development打开发环境包部署到Nginx验证，如果可正常运行，说明是生产优化配置导致的问题。在package.json的sideEffects数组中加入"@syncfusion/**"、"@agm/**"标记依赖的侧效应，避免摇树误删必要运行时代码；也可临时将angular.json中production配置的optimization、buildOptimizer设为false缩小问题范围。
• 修正Nginx配置
  打开浏览器控制台优先排查报错信息：
  • 如出现静态资源404，确认angular.json中baseHref配置和Nginx部署路径匹配，若部署在子路径下，Nginx需添加对应重写规则：

location /your-sub-path/ {
root 你的静态资源存放目录;
try_files $uri $uri/ /your-sub-path/index.html;
}

• 如出现CORS报错，是因为本地ng serve自带代理能力，部署后代理失效，需在Nginx侧配置反向代理转发接口请求，或让后端服务配置跨域允许规则。
• 清理不一致依赖
  本地开发可能存在幽灵依赖问题，删除node_modules文件夹和package-lock.json/yarn.lock文件，重新执行npm install安装依赖后再打包部署。

每调整一项配置后打包部署一次，优先解决浏览器控制台抛出的显式报错，可快速定位问题根因。

内容的提问来源于stack exchange，提问作者Ivan Galetić