0

Upgrading from Angular 11 to 13 was flawless. The application used several custom libraries that were built externally. Prior to the upgrade, I manually created those components/services/models inside the app and everything ran and compiled fine. However this error persists after exporting the things back out of the app installing the .tgz packed version:

main.js:1 TypeError: Cannot read properties of undefined (reading 'deps')
    at VV (main.js:1:65360)
    at ZE (main.js:1:65365)
    at PV (main.js:1:63675)
    at RV.processProvider (main.js:1:63685)
    at main.js:1:63486
    at main.js:1:32945
    at Array.forEach (<anonymous>)
    at qa (main.js:1:32909)
    at RV.processInjectorType (main.js:1:63473)
    at main.js:1:63153

Meanwhile, if I try to ng build --watch the library and import objects from the /dist folder everything works. Installing packed version .tgz doesn't, while everything compiles without errors.

{
    "name": "app-ui",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve --port 1234 --verbose",
        "build": "ng build --prod",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "playground": "angular-playground"
    },
    "private": true,
    "devDependencies": {
        "@angular-devkit/build-angular": "^13.3.4",
        "@angular/cli": "^13.3.4",
        "@angular/compiler-cli": "^13.3.5",
        "@types/angular": "1.8.4",
        "@types/echarts": "^4.9.15",
        "@types/jasmine": "^4.0.3",
        "@types/jasminewd2": "~2.0.10",
        "@types/jquery": "^3.5.6",
        "@types/moment": "^2.13.0",
        "@types/node": "^17.0.31",
        "@types/slickgrid": "^2.1.32",
        "angular-playground": "^9.0.1",
        "codelyzer": "^6.0.2",
        "jasmine-core": "~4.1.0",
        "jasmine-spec-reporter": "~7.0.0",
        "karma": "^6.3.19",
        "karma-chrome-launcher": "~3.1.1",
        "karma-coverage-istanbul-reporter": "~3.0.2",
        "karma-jasmine": "^5.0.0",
        "karma-jasmine-html-reporter": "~1.7.0",
        "ng-packagr": "^13.0.0",
        "protractor": "~7.0.0",
        "resize-observer-polyfill": "^1.5.1",
        "ts-node": "~10.7.0",
        "tslint": "~6.1.3",
        "typescript": "^4.6.4"
    },
    "dependencies": {
        "@angular/animations": "^13.3.5",
        "@angular/cdk": "^13.3.5",
        "@angular/common": "^13.3.5",
        "@angular/compiler": "^13.3.5",
        "@angular/core": "^13.3.5",
        "@angular/forms": "^13.3.5",
        "@angular/material": "^13.3.5",
        "@angular/platform-browser": "^13.3.5",
        "@angular/platform-browser-dynamic": "^13.3.5",
        "@angular/router": "^13.3.5",
        "@egjs/hammerjs": "^2.0.17",
        "@custom/services": "file:../../custom/angular-libraries/projects/custom-services/custom-services-2.0.0.tgz",
        "@ngx-loading-bar/core": "^6.0.2",
        "@ngx-loading-bar/http-client": "^6.0.2",
        "@ngx-translate/core": "^14.0.0",
        "@ngx-translate/http-loader": "^7.0.0",
        "@popperjs/core": "^2.11.5",
        "@slickgrid-universal/common": "^1.2.6",
        "angular-slickgrid": "^4.1.4",
        "bootstrap": "3.4.1",
        "classlist.js": "^1.1.20150312",
        "core-js": "^3.22.4",
        "custom-event-polyfill": "^1.0.7",
        "echarts": "^5.3.2",
        "flatpickr": "^4.6.13",
        "font-awesome": "^4.7.0",
        "jquery": "3.6.0",
        "jquery-ui-dist": "^1.13.1",
        "keycharm": "^0.4.0",
        "moment": "^2.29.3",
        "multiple-select-modified": "^1.3.17",
        "ngx-echarts": "^8.0.1",
        "ngx-loading-bar": "0.0.9",
        "normalize-scss": "^7.0.1",
        "normalize.css": "^8.0.1",
        "rxjs": "~7.5.0",
        "tslib": "^2.4.0",
        "web-animations-js": "^2.3.2",
        "zone.js": "~0.11.4"
    }
}
  • Everything was working fine on Angular 11
  • There's no keyword 'deps' in any of my files.
  • The services include AuthService, Interceptor and Api (which includes just standard HTTP client methods).
  • Yes, I tried Ivy partial, non partial and ivy false. Same
  • Yes, I tried deleting node_modules. Same. And yes everything is being installed/imported correctly in node_modules... I get type errors if I mess something up.
  • Yes, I tried: "moduleResolution": "Node", "target": "es2020", "lib": ["dom", "es2020"], "module": "es2020", "types":["jasmine", "node"] in all the appropriate files as other threads have mentioned when dealing with "Cannot read properties of undefined...." during Angular upgrade but no success.
5
  • I'm not sure if you tried to upgrade the package.json manually or not but it's better to use Angular Update website for such upgrade (that website provides shell scripts that will run in order to upgrade between versions) and they also do not recommend to jump multiple versions, you should try from 11 to 12 then from 12 to 13, you typically have better luck doing it that way. Side note, don't use @types/slickgrid this is out of date and Angular-Slickgrid is now fully Typed in Slickgrid-Universal (which I'm the author BTW)
    – ghiscoding
    Commented May 11, 2022 at 22:12
  • Thanks @ghiscoding, I found the Angular Update website very time consuming, instead I created a new Angular 13 app and moved everything over. It was all successful for the self contained app. When I tried to create libraries I got stuck. Regarding slickgrid everything works as expected but I do get this weird error only on the IDE Event onAngularGridCreated is not emitted by any applicable directives nor by angular-slickgrid element
    – Dev
    Commented May 11, 2022 at 23:07
  • @ghiscoding onAngularGridCreated imgur.com/a/7Vh4Ayd Also, what's up with these paging buttons? Should I override them manually imgur.com/4wu0XFd Everything works fine though.
    – Dev
    Commented May 11, 2022 at 23:16
  • Another issue with SlickGrid, affecting all versions, the autoresize doesn't work when another component shrinks it's space for example material SideNav aka drawer no matter what option is specified. Works well when browser window is resized but not inner dom. My workaround is this new ResizeObserver(() => this.angularGrid!.resizerService.resizeGrid()).observe(this.host.nativeElement);
    – Dev
    Commented May 11, 2022 at 23:23
  • Sorry but this is not a forum, you should only ask 1 question at a time and most of your questions about slickgrid have answers/comments that can help by searching in all the issues/discussions of Angular-Slickgrid
    – ghiscoding
    Commented May 12, 2022 at 13:23

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.