angular-datatables本地运行正常 生产环境自定义功能丢失排查

核心触发原因 #

• 脚本引入错误：你的angular.json的build.options.scripts中重复引入了两次jQuery，第一次在最开头，datatables相关脚本加载完成后又引入了一次jQuery。开发环境未开启脚本合并压缩，重复引入的jQuery不会覆盖已挂载datatables扩展的原jQuery实例；但生产环境开启optimization后，所有脚本会被合并压缩，后引入的jQuery会覆盖全局的jQuery实例，导致原实例上挂载的$.fn.DataTable等扩展方法完全丢失，所有表格配置自然不生效。
• 样式冲突：你同时引入了dataTables.bootstrap4.min.css和jquery.dataTables.css两套datatables样式，生产环境样式合并压缩后会出现样式覆盖，可能导致分页、排序按钮、滚动条等组件的样式被隐藏，看起来像功能失效。
• AOT编译差异：开发环境你关闭了AOT编译，生产环境开启了AOT，若你的datatables初始化逻辑没有写在ngAfterViewInit生命周期中，或者表格是通过*ngIf动态渲染的，AOT模式下DOM生成时机和JIT模式不同，会导致datatables初始化时目标表格DOM还未生成，配置无法挂载。

修复步骤 #

1. 修正脚本引入配置，删除重复的jQuery，确保jQuery只在最前引入一次：

"scripts": [
  "./node_modules/jquery/dist/jquery.js",
  "node_modules/datatables.net/js/jquery.dataTables.js",
  "./node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js"
]

2. 修正样式引入配置，只保留适配bootstrap4的样式即可，删除原生datatables样式的引入：

"styles": [
  "src/styles.scss",
  "src/assets/scss/cload-theme.scss",
  "./node_modules/ngx-toastr/toastr.css",
  "./node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css"
]

3. 调整datatables初始化逻辑，确保初始化代码写在ngAfterViewInit钩子中，若使用*ngIf控制表格显隐，改为使用[hidden]避免DOM被频繁移除，或者在DOM渲染完成的回调中执行初始化。
4. 修复后本地执行ng build --prod，直接打开dist目录下的index.html调试，打开浏览器控制台检查是否有相关报错，确认功能正常后再部署到生产环境。

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