Angular 14 to Angular 17 Migration

Question

Recently, I upgraded my Angular version 14 to 17. After upgrading to 17, I am getting some problems like after installing the npm module getting the error with node_modules which is not expected. Please see the screenshot and my packaje.json below. If anyone has any suggestions, please feel free to put them in the comments.

Here is my package.json

"dependencies": {
    "@angular/animations": "~17.3.12",
    "@angular/cdk": "^16.2.14",
    "@angular/common": "~17.3.12",
    "@angular/compiler": "~17.3.12",
    "@angular/core": "~17.3.12",
    "@angular/forms": "~17.3.12",
    "@angular/localize": "~17.3.12",
    "@angular/platform-browser": "~17.3.12",
    "@angular/platform-browser-dynamic": "~17.3.12",
    "@angular/router": "~17.3.12",
    "@angular/service-worker": "~17.3.12",
    "@bartholomej/ngx-translate-extract": "^8.0.2",
    "@faker-js/faker": "^8.2.0",
    "@fortawesome/fontawesome-free": "^6.1.2",
    "@gloriousky/tailwindcss-localization": "^1.1.0",
    "@milkdown/core": "^7.3.0",
    "@milkdown/ctx": "^7.3.0",
    "@milkdown/plugin-history": "^7.3.0",
    "@milkdown/plugin-listener": "^7.3.0",
    "@milkdown/preset-commonmark": "^7.3.0",
    "@milkdown/prose": "^7.3.0",
    "@milkdown/theme-nord": "^7.3.0",
    "@milkdown/transformer": "^7.3.0",
    "@ngrx/effects": "^17.2.0",
    "@ngrx/entity": "^17.2.0",
    "@ngrx/router-store": "^17.2.0",
    "@ngrx/store": "^17.2.0",
    "@ngrx/store-devtools": "^17.2.0",
    "@ngx-formly/bootstrap": "^6.1.8",
    "@ngx-formly/core": "^6.1.8",
    "@ngx-translate/core": "^14.0.0",
    "@popperjs/core": "^2.11.0",
    "@types/video.js": "^7.3.53",
    "@uppy/angular": "^0.5.2",
    "@uppy/aws-s3": "^3.2.3",
    "@uppy/aws-s3-multipart": "^3.5.4",
    "@uppy/golden-retriever": "^3.1.0",
    "@uppy/image-editor": "^2.1.2",
    "@uppy/remote-sources": "^1.0.3",
    "angular-svg-icon": "^14.0.0",
    "animate.css": "^4.1.1",
    "chartjs-plugin-annotation": "^3.0.1",
    "chartjs-plugin-datalabels": "^2.2.0",
    "flowbite": "^2.5.1",
    "flowbite-datepicker": "^1.3.0",
    "i": "^0.3.7",
    "js-sha256": "^0.11.0",
    "lodash": "^4.17.20",
    "moment": "^2.29.4",
    "ng-circle-progress": "^1.7.1",
    "ng2-charts": "^4.1.1",
    "ngx-cookie-service": "^16.1.0",
    "ngx-markdown": "^17.2.1",
    "npm": "^9.8.1",
    "reconnecting-websocket": "^4.4.0",
    "remark-directive": "^3.0.0",
    "rxjs": "^7.5.0",
    "swiper": "^8.4.6",
    "tslib": "^2.3.0",
    "uuid": "^9.0.0",
    "video.js": "^8.5.2",
    "zone.js": "~0.14.10"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~17.3.9",
    "@angular-eslint/builder": "~17.5.3",
    "@angular-eslint/eslint-plugin": "~17.5.3",
    "@angular-eslint/eslint-plugin-template": "~17.5.3",
    "@angular-eslint/schematics": "~17.5.3",
    "@angular-eslint/template-parser": "~17.5.3",
    "@angular/cli": "~17.3.9",
    "@angular/compiler-cli": "~17.3.12",
    "@angular/language-service": "~17.3.12",
    "@biesbjerg/ngx-translate-extract": "^7.0.3",
    "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
    .....

    enter code here
    "typescript": "~5.4.5"
  },
  "prettier": {
    "tabWidth": 2,
    "singleQuote": true,
    "overrides": [
      {
        "files": "*.scss",
        "options": {
          "singleQuote": false
        }
      }
    ]
  }

I removed all cache and re-installed the dependency a lot of times but still can see this mismatch. Can not understand the issues.

Answer 1

In the tsconfig file, check if the version of JavaScript to which TypeScript will compile your code and the module system to use:

"module": "es2020",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "ES2022",

"module": "es2020": This option specifies that TypeScript should use the ECMAScript 2020 module system for the output. This means that the compiled JavaScript will use the import and export syntax for modules, which is the standard module system in modern JavaScript environments. This is suitable for environments that support ES modules, such as modern browsers and Node.js (with appropriate settings).

"target": "ES2022": means that the output JavaScript will use features available in ES2022, which is a modern version of JavaScript that includes features like top-level await, logical assignment operators, and more

After making any necessary configurations, try deleting the node_modules folder and then running npm install or yarn install.