Angular 2集成ngx-datatable时无法解析rxjs/operators

我正尝试在Angular 4应用中集成ngx-datatable，已遵循官方文档中的所有步骤，但仍遇到以下错误：

ERROR in ./~/@swimlane/ngx-datatable/release/index.js Module not found: Error: Can't resolve 'rxjs/operators' in 'C:\Myproject\node_modules@swimlane\ngx-datatable\release' @ ./~/@swimlane/ngx-datatable/release/index.js 8:136-161 @ ./ClientApp/app/app.shared.module.ts @ ./ClientApp/app/app.server.module.ts @ ./ClientApp/boot.server.ts

我的package.json内容如下：

{ 
  "name": "MyProject", 
  "private": true, 
  "version": "0.0.0", 
  "scripts": { 
    "test": "karma start ClientApp/test/karma.conf.js" 
  }, 
  "devDependencies": { 
    "@angular/animations": "4.2.5", 
    "@angular/cli": "^1.7.3", 
    "@angular/common": "4.2.5", 
    "@angular/compiler": "4.2.5", 
    "@angular/compiler-cli": "4.2.5", 
    "@angular/core": "4.2.5", 
    "@angular/forms": "4.2.5", 
    "@angular/http": "4.2.5", 
    "@angular/platform-browser": "4.2.5", 
    "@angular/platform-browser-dynamic": "4.2.5", 
    "@angular/platform-server": "4.2.5", 
    "@angular/router": "4.2.5", 
    "@ngtools/webpack": "1.5.0", 
    "@types/chai": "4.0.1", 
    "@types/datatables.net": "^1.10.9", 
    "@types/jasmine": "2.5.53", 
    "@types/jquery": "^3.3.1", 
    "@types/webpack-env": "1.13.0", 
    "angular2-router-loader": "0.3.5", 
    "angular2-template-loader": "0.6.2", 
    "aspnet-prerendering": "^3.0.1", 
    "aspnet-webpack": "^2.0.1", 
    "awesome-typescript-loader": "3.2.1", 
    "bootstrap": "3.3.7", 
    "chai": "4.0.2", 
    "css": "2.2.1", 
    "css-loader": "0.28.4", 
    "es6-shim": "0.35.3", 
    "event-source-polyfill": "0.0.9", 
    "expose-loader": "0.7.3", 
    "extract-text-webpack-plugin": "2.1.2", 
    "file-loader": "0.11.2", 
    "html-loader": "0.4.5", 
    "isomorphic-fetch": "2.2.1", 
    "jasmine-core": "2.6.4", 
    "jquery": "^3.2.1", 
    "json-loader": "0.5.4", 
    "karma": "1.7.0", 
    "karma-chai": "0.1.0", 
    "karma-chrome-launcher": "2.2.0", 
    "karma-cli": "1.0.1", 
    "karma-jasmine": "1.1.0", 
    "karma-webpack": "2.0.3", 
    "preboot": "4.5.2", 
    "raw-loader": "0.5.1", 
    "reflect-metadata": "0.1.10", 
    "rxjs": "^5.5.5", 
    "style-loader": "0.18.2", 
    "to-string-loader": "1.1.5", 
    "typescript": "2.4.1", 
    "url-loader": "0.5.9", 
    "webpack": "2.5.1", 
    "webpack-hot-middleware": "2.18.2", 
    "webpack-merge": "4.1.0", 
    "zone.js": "0.8.12" 
  }, 
  "dependencies": { 
    "@swimlane/ngx-datatable": "^12.0.0", 
    "angular-datatables": "^5.0.0", 
    "angular2-datatable": "^0.6.0", 
    "datatables.net": "^1.10.16", 
    "datatables.net-dt": "^1.10.16", 
    "json-stringify-safe": "^5.0.1", 
    "ng2-toasty": "^4.0.3", 
    "raven-js": "^3.24.2" 
  } 
}

问题原因分析 #

这个错误的核心是版本兼容性不匹配：

• 你安装的@swimlane/ngx-datatable@12.0.0是为Angular 6+和RxJS 6.x设计的，它会使用RxJS 6.x的新导入路径rxjs/operators。
• 但你的项目使用的是Angular 4.2.5和RxJS 5.5.5，在RxJS 5.x版本中，操作符的导入路径是rxjs/add/operator/xxx，并不存在rxjs/operators这个模块，所以webpack会报错找不到它。

解决方案 #

方案1：降级ngx-datatable到兼容Angular 4的版本（推荐）

Angular 4对应的ngx-datatable稳定兼容版本是11.x系列，你可以执行以下命令来降级：

# 先卸载当前版本
npm uninstall @swimlane/ngx-datatable
# 安装兼容版本
npm install @swimlane/ngx-datatable@11.3.2 --save

这个版本完全适配RxJS 5.x和Angular 4，不会出现导入路径的问题。

方案2：升级RxJS并添加兼容层（不推荐）

如果你坚持要使用ngx-datatable 12.x，需要升级RxJS到6.x，同时安装rxjs-compat来兼容旧的导入语法：

npm install rxjs@6.x rxjs-compat@6.x --save

但注意，Angular 4和RxJS 6.x的兼容性并不完美，可能会引发其他依赖注入或操作符使用的问题，所以更推荐方案1。

额外步骤 #

为了确保依赖版本完全匹配，建议清理现有依赖并重新安装：

# 删除node_modules和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

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