升级Angular至v17时安装angular-datatables遇undefined读取options错误

开发者阿泽

2026-6-26

升级Angular v14到v17时angular-datatables安装报错：Cannot read properties of undefined (reading 'options')

将Angular应用从v14升级到v17过程中，执行ng add angular-datatables命令安装/升级angular-datatables时，触发了Cannot read properties of undefined (reading 'options')错误，完整终端日志如下：

PS C:\Users\IM010907\Documents\git\Dashboard\ID_Client> npm run add-datatables

> icm@1.0.0 add-datatables
> ng add angular-datatables

? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more  
details and how to change this setting, see https://angular.io/analytics. No
Global setting: not set
Local setting: disabled
Effective status: disabled
ℹ Using package manager: npm
✔ Found compatible package version: angular-datatables@17.0.0.
✔ Package information loaded.

The package angular-datatables@17.0.0 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
? Which styling library would you like to use for DataTables? Bootstrap 5
    Your project needs Bootstrap CSS installed and configured for changes to take affect.
    ℹ️  Skipped adding "jquery" into package.json
    ✅️ Added "datatables.net" into "dependencies"
    ✅️ Added "@types/jquery" into "devDependencies"
    ✅️ Added "datatables.net-bs5" into "dependencies"
    🔍 Installing packages...
Cannot read properties of undefined (reading 'options')

已尝试的解决步骤：

切换默认样式、Bootstrap 5两种选项进行安装
按照官方文档执行手动安装流程
安装前删除node_modules和package.json
移除angular.json中所有旧的脚本和样式配置

以下是可行的解决建议：

对齐Angular CLI版本
确保本地Angular CLI版本与项目v17版本匹配，执行ng version查看，若版本不一致，全局安装v17版本CLI：npm install -g @angular/cli@17，再重新尝试操作。

手动完成配置收尾
日志显示依赖包已安装成功，可跳过ng add的自动配置，手动完成以下步骤：

在angular.json的styles数组中添加：

"node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css"

在angular.json的scripts数组中添加：

"node_modules/jquery/dist/jquery.min.js",
"node_modules/datatables.net/js/jquery.dataTables.min.js",
"node_modules/datatables.net-bs5/js/dataTables.bootstrap5.min.js"

在根模块（如AppModule）中导入DataTablesModule：

import { DataTablesModule } from 'angular-datatables';
@NgModule({
  imports: [
    // ...其他模块
    DataTablesModule
  ]
})
export class AppModule { }

补全jQuery依赖
angular-datatables依赖jQuery，日志显示跳过了jquery的添加，检查package.json中是否存在jquery依赖，若没有则手动安装：npm install jquery。
清理缓存后重装依赖
执行npm cache clean --force清理缓存，删除node_modules和package-lock.json，重新执行npm install安装所有依赖，之后直接手动配置angular-datatables，不再使用ng add命令。
检查angular.json完整性
确认angular.json结构完整，没有语法错误或缺失核心节点（比如projects下目标项目的architect、options配置），若文件损坏可从备份恢复或重新生成基础配置。
指定兼容版本安装
直接安装与Angular v17匹配的指定版本依赖：npm install angular-datatables@17.0.0 datatables.net@1.13.8 datatables.net-bs5@1.13.8（版本号可根据官方兼容说明调整）。

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