本地运行Angular应用执行ng serve时出现报错问题

我是Angular新手，本地运行基于Angular和.NET构建的系统时，执行ng serve命令触发以下错误：

ERROR in ./node_modules/vis-data/esnext/esm/vis-data.js Module not found: Error: Can't resolve 'vis-util/esnext/esm/vis-util.js' in 'D:\ADVJOBS\Adv.LogixEN.Jobs.App\node_modules\vis-data\esnext\esm' 
ERROR in node_modules/vis-util/types/util.d.ts(198,61): error TS1005: ',' expected. 
ERROR in node_modules/vis-util/types/util.d.ts(198,61): error TS1005: ',' expected. 
node_modules/vis-util/types/util.d.ts(198,62): error TS1005: ',' expected. 
node_modules/vis-util/types/util.d.ts(199,64): error TS1005: ',' expected. 
node_modules/vis-util/types/util.d.ts(199,65): error TS1005: ',' expected. 
node_modules/vis-util/types/util.d.ts(207,52): error TS1005: ',' expected. 
node_modules/vis-util/types/util.d.ts(199,65): error TS1005: ',' expected. 
node_modules/vis-util/types/util.d.ts(207,52): error TS1005: ',' expected. 
node_modules/vis-util/types/util.d.ts(207,53): error TS1005: ',' expected. 
node_modules/vis-util/types/util.d.ts(207,52): error TS1005: ',' expected. 
node_modules/vis-util/types/util.d.ts(207,53): error TS1005: ',' expected. 
node_modules/vis-util/types/util.d.ts(207,53): error TS1005: ',' expected.

我的package.json相关依赖如下：

"dependencies": {
    "@angular/animations": "^7.1.4",
    "@angular/cdk": "^7.2.0",
    "@angular/common": "^7.1.4",
    "@angular/compiler": "^7.1.4",
    "@angular/core": "^7.1.4",
    "@angular/forms": "^7.1.4",
    "@angular/http": "^7.1.4",
    "@angular/material": "^7.2.0",
    "@angular/material-moment-adapter": "^8.2.3",
    "@angular/platform-browser": "^7.1.4",
    "@angular/platform-browser-dynamic": "^7.1.4",
    "@angular/platform-server": "^7.1.4",
    "@angular/router": "^7.1.4",
    "@azure/msal-angular": "^1.1.0",
    "@covalent/core": "^2.0.0",
    "@covalent/dynamic-forms": "^2.0.0",
    "@covalent/highlight": "^2.0.0",
    "@covalent/http": "^2.0.0",
    "@covalent/http-deprec": "^2.0.0",
    "@covalent/markdown": "^2.0.0",
    "@egjs/hammerjs": "^2.0.17",
    "@fullcalendar/core": "4.0.2",
    "@fullcalendar/daygrid": "4.0.1",
    "@fullcalendar/interaction": "4.0.2",
    "@fullcalendar/timegrid": "4.0.1",
    "@sweetalert2/ngx-sweetalert2": "^5.0.0",
    "@swimlane/ngx-charts": "^10.0.0",
    "angular2-multiselect-dropdown": "^4.6.3",
    "bootstrap": "^4.3.1",
    "core-js": "^2.6.1",
    "d3": "^5.7.0",
    "devexpress-reporting-angular": "^18.2.3",
    "dom-to-image": "^2.6.0",
    "font-awesome": "^4.7.0",
    "fsevents": "^2.1.3",
    "hammerjs": "^2.0.8",
    "highlight.js": "9.13.1",
    "html2canvas": "^1.0.0-rc.5",
    "jquery": "^3.5.1",
    "jsgantt-improved": "^2.3.0",
    "keycharm": "^0.3.0",
    "knockout": "~3.4.0",
    "moment": "^2.24.0",
    "msal": "^1.4.0",
    "nan": "^2.14.0",
    "ng-gantt": "^2.4.9",
    "ng-material-datetimepicker": "^1.19.3",
    "ng-pick-datetime": "^7.0.0",
    "ng-pick-datetime-moment": "^1.0.8",
    "ngx-avatar": "^3.7.0",
    "ngx-bootstrap": "^5.1.2",
    "ngx-datepicker-material": "^1.0.1",
    "ngx-toastr": "^10.0.4",
    "ngx-vis": "^3.0.4",
    "node-pre-gyp": "^0.13.0",
    "popper.js": "^1.15.0",
    "primeicons": "^1.0.0",
    "primeng": "^7.1.2",
    "propagating-hammerjs": "^1.4.0",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.5.1",
    "sass": "^1.77.8",
    "showdown": "^1.9.1",
    "sweetalert2": "^8.0.0",
    "timsort": "^0.3.0",
    "tslib": "^1.9.0",
    "uuid": "^3.4.0",
    "vis-data": "^6.6.1",
    "vis-network": "^7.4.0",
    "vis-timeline": "^7.3.4",
    "vis-util": "^3.0.0",
    "zone.js": "^0.8.26"
  }

解决方法 #

问题分析 #

1. 模块路径不匹配：vis-data@6.6.1尝试引用的vis-util路径不存在，说明两个包版本不兼容；
2. TS语法不兼容：vis-util@3.0.0的类型文件使用了Angular 7.1.4对应TypeScript版本（~3.1.x）不支持的语法，导致TS1005错误。

操作步骤 #

1. 调整vis相关包版本：修改package.json中的依赖版本，换成兼容TS 3.1的版本：

   "vis-util": "^2.1.0",
   "vis-data": "^6.1.2",
   "vis-network": "^7.1.0",
   "vis-timeline": "^7.1.0"
   

2. 清理旧依赖文件：

   rm -rf node_modules
   rm package-lock.json
   

3. 重新安装依赖：

   npm install
   

4. 重启项目：

   ng serve
   

补充说明 #

ngx-vis@3.0.4与上述调整后的vis包版本兼容，修改后可正常运行项目。

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