Home > Blockchain >  Angular 9 upgraded to Angular 14: cannot read properties of undefined (reading 'Crypto')
Angular 9 upgraded to Angular 14: cannot read properties of undefined (reading 'Crypto')

Time:07-10

We are upgrading Angular 9 application to Angular 14. Followed enter image description here

package.json

{
  "name": "ui-angular",
  "version": "1.0.0",
  "license": "ORG",
  "scripts": {
    "ng": "ng",
    "nx": "nx",
    "start": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve --source-map=false",
    "start_dev": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve --configuration=dev_server --source-map=false",
    "build:dev_server": "ng build --configuration=dev_server",
    "build:prod": "node --max_old_space_size=12288 node_modules/@angular/cli/bin/ng build --configuration=production --source-map=false"

  },
  "private": true,
  "dependencies": {
    "@angular-redux/store": "^10.0.0",
    "@angular/animations": "^14.0.5",
    "@angular/cdk": "^9.2.3",
    "@angular/common": "^14.0.5",
    "@angular/compiler": "^14.0.5",
    "@angular/core": "^14.0.5",
    "@angular/forms": "^14.0.5",
    "@angular/platform-browser": "^14.0.5",
    "@angular/platform-browser-dynamic": "^14.0.5",
    "@angular/router": "^14.0.5",
    "@ctrl/tinycolor": "^3.4.0",
    "@grapecity/ar-designer": "^15.2.0",
    "@grapecity/ar-viewer": "^14.2.2764",
    "@kolkov/angular-editor": "^1.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
    "@nrwl/angular": "9.2.4",
    "@types/device-uuid": "^1.0.0",
    "@types/raphael": "^2.3.1",
    "angular-user-idle": "^2.2.7",
    "angular-xslt": "^0.2.1",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.4.1",
    "bootstrap-icons": "^1.4.0",
    "canvg": "^3.0.7",
    "chart.js": "3.4.0",
    "chartjs-plugin-datalabels": "2.0.0",
    "convert-units": "^2.3.4",
    "core-js": "2.5.0",
    "date-fns": "^2.21.1",
    "device-uuid": "^1.0.4",
    "file-saver": "^2.0.5",
    "font-awesome": "^4.7.0",
    "immer": "^7.0.0",
    "infinite-scroll": "^3.0.6",
    "jquery": "^3.5.1",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "ng2-charts": "3.0.0-rc.5",
    "ng2-signalr": "^10.1.0",
    "ngx-color-picker": "^9.1.0",
    "ngx-dynamic-hooks": "^1.7.0",
    "ngx-extended-pdf-viewer": "^8.2.0",
    "ngx-infinite-scroll": "^10.0.0",
    "ngx-print": "1.2.0-beta.6",
    "ngx-xml2json": "^1.0.2",
    "popper.js": "1.16.0",
    "primeicons": "2.0.0",
    "quill": "^1.3.7",
    "raphael": "^2.3.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-freeze": "^0.1.7",
    "redux-thunk": "^2.3.0",
    "rxjs": "~6.5.4",
    "signalr": "^2.4.2",
    "tslib": "^2.0.0",
    "tui-image-editor": "^3.14.3",
    "uuid": "^8.3.2",
    "webpack": "^4.46.0",
    "xlsx": "^0.16.9",
    "xml-formatter": "^2.4.0",
    "xmldom-ts": "^0.3.1",
    "xslt-ts": "^1.1.8",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "14.0.5",
    "@angular/cli": "^14.0.5",
    "@angular/compiler-cli": "^14.0.5",
    "@angular/language-service": "^14.0.5",
    "@compodoc/compodoc": "^1.1.11",
    "@nrwl/jest": "9.2.4",
    "@nrwl/workspace": "9.2.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/jest": "25.1.4",
    "@types/node": "~8.9.4",
    "codelyzer": "5.2.2",
    "dotenv": "6.2.0",
    "eslint": "6.8.0",
    "husky": "^4.3.0",
    "jasmine-core": "~3.5.0",
    "jasmine-marbles": "^0.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "jest": "25.2.3",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "karma-junit-reporter": "1.1.0",
    "karma-spec-reporter": "^0.0.32",
    "prettier": "1.19.1",
    "pretty-quick": "^3.1.0",
    "protractor": "~7.0.0",
    "sonar-scanner": "^3.1.0",
    "ts-jest": "25.2.1",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "tslint-html-report": "^2.0.3",
    "typescript": "~4.6.4"
  }
}

CodePudding user response:

I suggest you step by step for upgrading angular to avoid a problem. Because from the documentation when you upgrade from 9 to 14 it shows a warning something like this

Warning: We do not support migrating across multiple major versions at once. Please migrate each major version individually.

You can try from 9 to 10, 10...14

CodePudding user response:

Assuming were talking about Crypto-JS, tested with Angular 14, it should work. Please post your package.json if you're still having issues after overlooking package.json.

https://www.npmjs.com/package/crypto-js

  "dependencies": {
    "@angular/animations": "^14.0.0",
    "@angular/common": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/forms": "^14.0.0",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "@types/crypto-js": "3.1.41",
    "core-js": "2.5.5",
    "crypto-js": "4.1.1",
    "rxjs": "6.1.0",
    "zone.js": "0.8.26"
  },

https://stackblitz.com/edit/crypto-data-lnexjs?file=package.json

  • Related