Angular 7+项目中ngx-device-detector 1.3.3无法使用的问题排查

报错信息 #

开发环境报错 #

Uncaught TypeError: Object(...) is not a function
    at ./node_modules/ngx-device-detector/fesm2015/ngx-device-detector.js (ngx-device-detector.js:750:49)
    at __webpack_require__ (bootstrap:83:1)
    at ./src/app/core/interceptors/case-management/interceptor.ts (sr-directives.module.ts:29:32)
    at __webpack_require__ (bootstrap:83:1)
    at ./src/app/app.module.ts (app.component.ts:19:26)
    at __webpack_require__ (bootstrap:83:1)
    at ./src/main.ts (main.ts:1:1)
    at __webpack_require__ (bootstrap:83:1)
    at 0 (main.ts:12:37)
    at __webpack_require__ (bootstrap:83:1)

生产构建报错 #

main.af4c7266efcd602edda6.js:1 Uncaught TypeError: Object(...) is not a function
    at main.af4c7266efcd602edda6.js:1:202752
    at Object.ARm4 (main.af4c7266efcd602edda6.js:1:202865)
    at f (runtime.c21f83f4a72b3dc8a0ac.js:1:507)
    at Module.zUnb (main.af4c7266efcd602edda6.js:1:2162237)
    at f (runtime.c21f83f4a72b3dc8a0ac.js:1:507)
    at 0 (main.af4c7266efcd602edda6.js:1:43617)
    at f (runtime.c21f83f4a72b3dc8a0ac.js:1:507)
    at t (runtime.c21f83f4a72b3dc8a0ac.js:1:376)
    at Array.r [as push] (runtime.c21f83f4a72b3dc8a0ac.js:1:248)
    at main.af4c7266efcd602edda6.js:1:47

项目依赖（package.json） #

"dependencies": {
    "@angular-extensions/elements": "^7.4.0",
    "@angular/animations": "^7.2.9",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "^7.2.9",
    "@angular/forms": "~7.2.0",
    "@angular/http": "^7.2.15",
    "@angular/material": "^7.3.4",
    "@angular/material-moment-adapter": "^8.1.2",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/fontawesome-free-webfonts": "^1.0.9",
    "@fortawesome/fontawesome-svg-core": "^1.2.17",
    "@fortawesome/free-solid-svg-icons": "^5.8.1",
    "@ng-bootstrap/ng-bootstrap": "^3.3.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@swimlane/ngx-charts": "^12.0.1",
    "@types/pdfjs-dist": "~2.1.7",
    "angular-hammer": "^2.2.0",
    "angular-material-fileupload": "^2.0.0",
    "angular-svg-round-progressbar": "^3.0.1",
    "angular-user-idle": "^2.2.1",
    "angular2-draggable": "^2.3.2",
    "angular2-text-mask": "^9.0.0",
    "bootstrap": "^4.3.1",
    "chart.js": "^2.9.3",
    "chartjs-plugin-datalabels": "^2.0.0",
    "core-js": "^2.5.4",
    "d3": "^4.13.0",
    "event-source-polyfill": "^1.0.22",
    "exceljs": "^4.1.1",
    "file-saver": "^2.0.2",
    "hammerjs": "^2.0.8",
    "howler": "^2.1.3",
    "https-proxy-agent": "^2.2.1",
    "jsencrypt": "^3.2.0",
    "material-design-icons": "^3.0.1",
    "moment": "^2.24.0",
    "ng-circle-progress": "^1.5.1",
    "ng-event-source": "^1.0.14",
    "ng-simple-slideshow": "^1.2.8",
    "ng2-charts": "~2.2.5",
    "ngx-bootstrap": "^5.6.2",
    "ngx-daterangepicker-material": "~2.1.8",
    "ngx-device-detector": "^1.3.3",
    "ngx-infinite-scroll": "^7.0.1",
    "ngx-pagination": "^4.1.0",
    "ngx-pipes": "^2.5.1",
    "ngx-quill": "^6.3.1",
    "ngx-show-hide-password": "^2.0.3",
    "ngx-ui-loader": "^7.2.1",
    "node-sass": "^4.14.1",
    "pdfjs": "^2.3.5",
    "pdfjs-dist": "~2.5.207",
    "quill": "^1.3.6",
    "quill-mention": "^3.1.0",
    "rxjs": "^6.5.4",
    "simple-pdf-viewer": "^2.0.3",
    "tslib": "^1.9.0",
    "xlsx": "^0.16.5",
    "zone.js": "~0.8.26"
  }

原因分析 #

Uncaught TypeError: Object(...) is not a function 这类错误核心原因是库版本与Angular框架版本不兼容。ngx-device-detector v1.3.3已不再适配Angular 7，该版本引入了Angular 8+才支持的API或语法特性，导致在Angular 7环境中无法正常解析。

解决步骤 #

1. 卸载当前不兼容版本
   执行命令移除现有版本：

   npm uninstall ngx-device-detector
   

2. 安装适配Angular 7的版本
   选择经验证兼容Angular 7的ngx-device-detector v1.2.0：

   npm install ngx-device-detector@1.2.0 --save
   

3. 验证集成配置

   • 在app.module.ts中确保正确导入模块：

     import { DeviceDetectorModule } from 'ngx-device-detector';
     
     @NgModule({
       imports: [
         // ...其他模块
         DeviceDetectorModule.forRoot()
       ]
     })
     export class AppModule { }
     

   • 在组件/服务中正确注入并使用服务：

     import { DeviceDetectorService } from 'ngx-device-detector';
     
     constructor(private deviceService: DeviceDetectorService) {
       const deviceInfo = this.deviceService.getDeviceInfo();
       // 设备信息业务逻辑
     }
     

4. 重新构建项目
   执行对应命令验证报错是否消除：

   # 开发环境启动
   ng serve
   # 生产环境构建
   ng build --prod
   

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