Angular项目rxjs类型文件TS编译错误排查求助

嘿，我一眼就看出问题所在了——你装的angular-datatables@9.0.1和当前项目的rxjs@5.5.12完全不兼容！

问题根源 #

angular-datatables的v9.x版本是给Angular 8+准备的，它依赖的rxjs是6.x及以上版本。但你的项目用的是Angular 5，这个版本只能适配rxjs 5.x系列。当你安装了高版本的angular-datatables后，它会自带一个rxjs 6+的类型定义文件，而你的TypeScript版本（~2.5.3，Angular 5的标配）根本不支持rxjs 6+里的新语法，所以才会抛出一堆TS1005、TS1109的编译错误。

解决方案：降级angular-datatables到兼容版本 #

你需要把angular-datatables换成支持Angular 5的v5.x版本，步骤如下：

1. 卸载当前的angular-datatables
   打开终端执行：

npm uninstall angular-datatables --save

2. 安装兼容的v5.x版本
   运行这条命令安装稳定的兼容版本：

npm install angular-datatables@5.0.0 --save

如果需要，你也可以选择同系列的其他小版本（比如5.1.1），它们都适配Angular 5和rxjs 5.x。

3. 重新构建项目
   安装完成后，检查你的package.json确认版本正确，然后重新构建：

npm run build

额外提醒 #

• 别去升级rxjs或者TypeScript版本，Angular 5和它们的版本绑定很严格，升级只会带来更多麻烦。
• 你的其他依赖（比如primeng@4.1.3、ngx-select-ex@3.5.2-ng4）都是适配Angular 5的，保持现状就好。

你提供的错误信息： #

- ERROR in node_modules/angular-datatables/node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: 应为';'。
node_modules/angular-datatables/node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: 应为';'。
node_modules/angular-datatables/node_modules/rxjs/internal/types.d.ts(81,77): error TS1109: 应为表达式。
node_modules/angular-datatables/node_modules/rxjs/internal/types.d.ts(82,52): error TS1005: 应为';'。
node_modules/angular-datatables/node_modules/rxjs/internal/types.d.ts(82,88): error TS1005: 应为';'。
node_modules/angular-datatables/node_modules/rxjs/internal/types.d.ts(82,92): error TS1109: 应为表达式。

项目依赖配置： #

{ "name": "default", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "postinstall": "npm run tsformat", "tsformat": "tsfmt -r" }, "private": true, "dependencies": { "@angular/animations": "^5.2.0", "@angular/common": "^5.2.0", "@angular/compiler": "^5.2.0", "@angular/core": "^5.2.0", "@angular/forms": "^5.2.0", "@angular/http": "^5.2.0", "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/router": "^5.2.0", "@ng-bootstrap/ng-bootstrap": "^1.0.0", "angular-datatables": "^9.0.1", "angular-user-idle": "^1.1.0", "braintree-web": "^3.50.0", "chart.js": "^2.7.3", "classlist.js": "^1.1.20150312", "core-js": "^2.6.5", "datatables.net": "^1.10.20", "datatables.net-dt": "^1.10.20", "enhanced-resolve": "^3.3.0", "fullcalendar": "^3.10.0", "jquery": "^3.4.1", "lodash": "^4.17.11", "moment": "^2.24.0", "ng-recaptcha": "^3.0.0", "ng2-select2": "^1.0.0-beta.16", "ngx-braintree": "^5.1.1", "ngx-clipboard": "^11.1.9", "ngx-infinite-scroller": "^0.4.1", "ngx-select-ex": "^3.5.2-ng4", "primeng": "^4.1.3", "rxjs": "^5.5.12", "summernote": "^0.8.11", "sweetalert2": "^7.33.1", "typescript-formatter": "^5.2.0", "zone.js": "^0.8.27" }, "devDependencies": { "@angular/cli": "~1.7.4", "@angular/compiler-cli": "^5.2.0", "@angular/language-service": "^5.2.0", "@types/chart.js": "^2.7.45", "@types/datatables.net": "^1.10.18", "@types/jquery": "^3.3.34", "typescript": "~2.5.3" } }

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