npm i command throws warning how to fix it

Question

This is the warnings I am getting for npm i command. Node modules directory is creating. When I do ng build it's throwing errors showing all the modules as shown in second image. What will be the issue? I updated the package.json as shown below.

{
  "name": "VYIJNLKM",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "conventional-changelog": "conventional-changelog",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "npm run build -- --prod --aot",
    "test": "ng test",
    "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
    "lint": "ng lint",
    "lint:fix": "ng lint ngx-admin-demo --fix",
    "lint:styles": "stylelint ./src/**/*.scss",
    "lint:ci": "npm run lint && npm run lint:styles",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "ng e2e",
    "docs": "compodoc -p src/tsconfig.app.json -d docs",
    "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
    "prepush": "npm run lint:ci",
    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
    "postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\""
  },
  "dependencies": {
    "@angular/animations": "^17.3.8",
    "@angular/cdk": "17.3.8",
    "@angular/common": "^17.3.12",
    "@angular/compiler": "^17.3.12",
    "@angular/compiler-cli": "^17.3.12",
    "@angular/core": "^17.3.12",
    "@angular/forms": "^17.3.8",
    "@angular/google-maps": "^17.3.10",
    "@angular/localize": "^17.3.12",
    "@angular/platform-browser": "^17.3.8",
    "@angular/platform-browser-dynamic": "^17.3.8",
    "@angular/router": "^17.3.8",
    "@nebular/auth": "13.0.0",
    "@nebular/eva-icons": "13.0.0",
    "@nebular/security": "13.0.0",
    "@nebular/theme": "13.0.0",
    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
    "@ng-select/ng-select": "^12.0.7",
    "@types/jasmine": "^5.1.4",
    "bootstrap": "^5.3.3",
    "classlist.js": "1.1.20150312",
    "core-js": "3.37.1",
    "crypto-js": "^4.2.0",
    "echarts": "5.5.1",
    "eva-icons": "^1.1.3",
    "file-saver": "^2.0.5",
    "howler": "^2.2.4",
    "html-to-pdfmake": "^2.5.10",
    "intl": "1.2.5",
    "ionicons": "7.4.0",
    "jspdf": "^2.5.1",
    "lz-string": "^1.5.0",
    "nebular-icons": "1.1.0",
    "ng2-completer": "^9.0.1",
    "ngx-echarts": "18.0.0",
    "normalize.css": "8.0.1",
    "pace-js": "1.2.4",
    "pdfmake": "^0.2.10",
    "resize-observer-polyfill": "^1.5.1",
    "roboto-fontface": "0.10.0",
    "rxjs": "7.8.1",
    "rxjs-compat": "6.6.7",
    "sass": "^1.77.8",
    "secure-ls": "^2.0.0",
    "socicon": "3.0.5",
    "style-loader": "^4.0.0",
    "tinymce": "7.2.1",
    "tslib": "^2.6.3",
    "typeface-exo": "1.1.13",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.14.7"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "17.3.8",
    "@angular/cli": "^17.3.8",
    "@angular/compiler-cli": "^17.3.12",
    "@angular/language-service": "17.3.8",
    "@compodoc/compodoc": "1.1.25",
    "@fortawesome/fontawesome-free": "^6.5.2",
    "@types/d3-color": "3.1.3",
    "@types/file-saver": "^2.0.7",
    "@types/google.maps": "^3.43.3",
    "@types/howler": "^2.2.11",
    "@types/jasminewd2": "^2.0.13",
    "@types/node": "^20.14.10",
    "codelyzer": "^0.0.28",
    "conventional-changelog-cli": "5.0.0",
    "husky": "9.0.11",
    "jasmine-core": "~4.6.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.2.0",
    "karma-cli": "2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "npm-run-all": "4.1.5",
    "protractor": "~3.3.0",
    "rimraf": "6.0.0",
    "stylelint": "16.6.1",
    "ts-node": "10.9.2",
    "tslint": "~5.20.1",
    "typescript": "5.3.3"
  }
}

Answer 1

Remove the postinstall script from package.json.

Remove this:

"postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig "./src/tsconfig.app.json""

Why was ngcc removed?

The removal of ngcc is the last step forward in the transition to Ivy. Since the introduction of Ivy in Angular 9, Angular developers have actively encouraged the community and library authors to switch to Ivy. With the release of Angular 16, this process has become final, and now all libraries must be compatible with Ivy.

The removal of ngcc simplifies the build process and reduces build time, as there is no need for additional code transformation. It also makes integration with other tools like Webpack easier and facilitates development and debugging, as there are no complexities associated with having two different library formats.