Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Issue Running Angular Application Locally – Error on ng serve

I am new to Angular and I am facing an issue when trying to run a system locally built with Angular and .NET. Below is my package.json file, and I have also attached screenshots of the error and the package.json file sections.

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:ADVJOBSAdv.LogixEN.Jobs.Appnode_modulesvis-dataesnextesm' 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 (relevant sections):

"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"
  }

I am using Angular version 7.1.4. the error shows when i run following command

ng serve
Tags:

3

Answers


  1. 0

    It seems as if your vis-util package has errors.

    Firstly, you can try reinstalling your node_modules:

    rm -rf node_modules
npm install

    If that doesn’t help, you can try downgrading vis-util to a version that is known to work with Angular 7.1.4.

    npm install [email protected] --save

    The same goes for your Typescript version:

    npm install typescript@~3.2.2 --save-dev

    Since you do have very many packages installed it might not be a bad idea to also check the other packages for incompatible versions.

    Login or Signup to reply.
  2. 0

    Try to re-install node-modules with the below commands.

    del node_modules
del package-lock.json
npm install --legacy-peer-deps

    use the above install command with --legacy-peer-deps since there might be any dependency related issues. Also delete the package-lock.json to avoid version related issues.

    Login or Signup to reply.
  3. 0

    For Angular 7.1.4, the recommended Node.js version is 10.x or 12.x. Here’s what you should do:

    1. Check your current Node.js version:

      node -v

    2. If your Node.js version is not in the 10.x or 12.x range, I recommend installing Node.js 12.x (the latest LTS version compatible with Angular 7). You can use a Node Version Manager like nvm (for Unix-based systems) or nvm-windows (for Windows) to easily switch between Node.js versions.

      For Windows (using nvm-windows):

      nvm install 12.22.12
nvm use 12.22.12

      For Unix-based systems (using nvm):

      nvm install 12.22.12
nvm use 12.22.12

    3. After switching to the correct Node.js version, clear your npm cache and reinstall your dependencies:

      npm cache clean --force
rm -rf node_modules package-lock.json
npm install

    4. Make sure your global Angular CLI version matches your project’s version:

      npm install -g @angular/[email protected]

    5. Now try running your project again:

      ng serve

    Using the correct Node.js version can resolve many compatibility issues, especially with older Angular versions. If you’re still encountering problems after aligning your Node.js version and following the previous suggestions, please let me know, and I’ll be happy to help further.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search