Upgrade Syncfuion Version Problem

[Nagendra Gupta]

Dear Team

I have updated syncfusion all control which i am using in my project to latest version and also updated angular version 8 to 9.

After updated i am getting error when I am running ng serve . Error and package.json is given below.

An unhandled exception occurred: NGCC failed.
See "C:\Users\user\AppData\Local\Temp\ng-UtLvRM\angular-errors.log" for further details.

{

"name":"Silk",

"version":"5.0.0",

"license":"MIT",

"scripts":{

"ng":"ng",

"start":"ngserve--port4200--proxy-configproxy.conf.json",

"build":"ngbuild",

"test":"ngtest",

"lint":"nglint",

"e2e":"nge2e",

"postinstall":"ngcc"

},

"private":true,

"dependencies":{

"@agm/core":"^1.0.0-beta.5",

"@amcharts/amcharts4":"^4.10.10",

"@angular/animations":"^9.0.0",

"@angular/cdk":"^8.0.0",

"@angular/common":"^9.0.0",

"@angular/compiler":"^9.0.0",

"@angular/core":"^9.0.0",

"@angular/flex-layout":"^8.0.0-beta.26",

"@angular/forms":"^9.0.0",

"@angular/material":"^8.0.0",

"@angular/platform-browser":"^9.0.0",

"@angular/platform-browser-dynamic":"^8.0.0",

"@angular/router":"^9.0.0",

"@angular/service-worker":"^9.0.0",

"@ng-bootstrap/ng-bootstrap":"^5.1.5",

"@ngx-translate/core":"^11.0.1",

"@ngx-translate/http-loader":"^4.0.0",

"@swimlane/ngx-datatable":"15.0.1",

"@syncfusion/ej2":"^19.1.56",

"@syncfusion/ej2-angular-buttons":"^19.1.54",

"@syncfusion/ej2-angular-calendars":"^19.1.56",

"@syncfusion/ej2-angular-documenteditor":"^19.1.56",

"@syncfusion/ej2-angular-dropdowns":"^19.1.56",

"@syncfusion/ej2-angular-grids":"^19.1.56",

"@syncfusion/ej2-angular-inputs":"^19.1.54",

"@syncfusion/ej2-angular-lists":"^19.1.56",

"@syncfusion/ej2-angular-navigations":"^19.1.54",

"@syncfusion/ej2-angular-notifications":"^19.1.54",

"@syncfusion/ej2-angular-popups":"^19.1.56",

"@syncfusion/ej2-angular-richtexteditor":"^19.1.56",

"@syncfusion/ej2-angular-treegrid":"^19.1.56",

"@syncfusion/ej2-data":"^19.1.56",

"@syncfusion/ej2-grids":"^19.1.56",

"angular-calendar":"^0.27.11",

"angular-disable-browser-back-button":"^1.0.1",

"angular-resizable-element":"^3.3.0",

"angular-tree-component":"8.4.0",

"clone":"^2.1.2",

"core-js":"^2.6.11",

"css-element-queries":"^1.2.3",

"d3":"^4.9.1",

"date-fns":"^1.29.0",

"dragula":"^3.7.2",

"font-awesome":"4.7.0",

"hammerjs":"^2.0.8",

"insert-text-at-cursor":"^0.3.0",

"jquery":"^3.3.1",

"jqwidgets-ng":"^8.3.3",

"karma-jasmine":"^1.1.1",

"leaflet":"^1.5.1",

"leaflet-map":"^0.2.1",

"moment":"^2.22.2",

"ng2-ace-editor":"^0.3.9",

"ng2-breadcrumb":"0.5.14",

"ng2-ckeditor":"1.2.3",

"ng2-dragula":"^2.1.1",

"ng2-file-upload":"^1.3.0",

"ng2-validation":"^4.2.0",

"ngx-bootstrap":"4.3.0",

"ngx-color-picker":"^8.0.1",

"ngx-google-places-autocomplete":"^2.0.4",

"ngx-json-viewer":"^2.4.0",

"ngx-json-viewer-scrolling":"^2.3.1",

"ngx-perfect-scrollbar":"8.0.0",

"ngx-quill":"^5.2.0",

"ngx-sortablejs":"^3.1.1",

"ngx-tour-ng-bootstrap":"^4.1.1",

"perfect-scrollbar":"^1.5.0",

"print-js":"^1.6.0",

"quill":"^1.3.6",

"rxjs":"^6.5.4",

"rxjs-compat":"^6.5.4",

"screenfull":"^4.2.0",

"simple-line-icons":"^2.4.1",

"sortablejs":"^1.10.2",

"tether":"^1.4.7",

"ts-helpers":"^1.1.2",

"tslib":"^1.10.0",

"widgster":"^1.0.0",

"zone.js":"~0.10.2"

},

"devDependencies":{

"@angular-devkit/build-angular":"~0.901.15",

"@angular/cli":"^9.0.0",

"@angular/compiler-cli":"^9.0.0",

"@angular/language-service":"^9.0.0",

"@types/d3":"^3.5.41",

"@types/googlemaps":"^3.39.6",

"@types/jasmine":"^2.8.11",

"@types/jquery":"^3.3.22",

"@types/node":"^12.11.1",

"@types/nvd3":"^1.8.40",

"codelyzer":"^5.1.2",

"jasmine-core":"^3.3.0",

"jasmine-spec-reporter":"^4.2.1",

"karma":"^4.1.0",

"karma-chrome-launcher":"^2.2.0",

"karma-cli":"^1.0.1",

"karma-coverage-istanbul-reporter":"^2.0.4",

"karma-jasmine":"^1.1.2",

"karma-jasmine-html-reporter":"^1.5.1",

"protractor":"^5.4.1",

"ts-node":"^7.0.1",

"tslint":"^5.17.0",

"typescript":"3.7.7",

"webpack-bundle-analyzer":"^3.6.0"

}

}

If i am updating only syncfusion controls its working fine in localhost, but when I publish in server it giving error. Error is given below.

ERROR Error: Uncaught (in promise): TypeError: Object prototype may only be an Object or null: undefined

TypeError: Object prototype may only be an Object or null: undefined

Can you please provide me solution.

[Jesus Arockia Sankaran S]

Hi Nagendra, 

Sorry for the inconvenience.  

We have checked the reported problem by creating an Angular 9 application with Syncfusion components and the installation itself failed in with post install script. And, it is already known issue in older version of Angular and Angular Team fixed this issue with Angular CLI version “10.1.6”. So, we request to upgrade your Angular CLI version to the latest.  

GitHub Issue Link: https://github.com/angular/angular/issues/38947#issuecomment-709221385 

Please get back to us if you have any queries. 

Regards, 

Jesus Arockia Sankaran S 

[Nagendra Gupta]

Hello Team

As your suggestion I upgrade our application angular version 9.0.0 to 10.1.6. But after that i faced new error that is below.

ERROR TypeError: Cannot call a class as a function
    at _classCallCheck (classCallCheck.js:3)
    at new ComboBox (ej2-dropdowns.es2015.js:7415)
    at ComboBoxComponent._createSuperInternal (createSuper.js:12)
    at new ComboBoxComponent (combobox.component.ts:75)
    at createClass (core.js:23695)
    at createDirectiveInstance (core.js:23564)
    at createViewNodes (core.js:30653)
    at createEmbeddedView (core.js:30556)
    at callWithDebugContext (core.js:31536)
    at Object.debugCreateEmbeddedtHView [as createEmbeddedView] (core.js:31100)

This error is coming every Syncfusion Control which is using in project. So it's my humble request you to please give me better solution for that case so that i can't face that type of issue in future.

[Jesus Arockia Sankaran S]

Hi Nagendra, 

Sorry for the inconvenience.  

We suspect that there is a dependency mismatch in Angular libraries and we have created a sample in Angular CLI version 10.2.X (latest after Angular 10 release version) for checking the reported issue. But we are not able to reproduce the reported issue in our end and you can download the sample from the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/164683/ze/ej2-sync1115685990 

Angular CLI installation: 

>> npm i -g @angular/[email protected] 

Angular Package Versions: 

 "dependencies": { 

    "@angular/animations": "~10.2.4", 

    "@angular/common": "~10.2.4", 

    "@angular/compiler": "~10.2.4", 

    "@angular/core": "~10.2.4", 

    "@angular/forms": "~10.2.4", 

    "@angular/platform-browser": "~10.2.4", 

    "@angular/platform-browser-dynamic": "~10.2.4", 

    "@angular/router": "~10.2.4", 

    "@syncfusion/ej2-angular-grids": "^19.1.57", 

    "rxjs": "~6.6.0", 

    "tslib": "^2.0.0", 

    "zone.js": "~0.10.2" 

  }, 

  "devDependencies": { 

    "@angular-devkit/build-angular": "~0.1002.1", 

    "@angular/cli": "~10.2.1", 

    "@angular/compiler-cli": "~10.2.4", 

    "@types/node": "^12.11.1", 

We request you to reproduce the reported issue in the provided sample to preproduce in our end for better understanding in case we misunderstood your point.  

Reference Image: 

 

Please get back to us with requested details and further query if any. 

Regards, 

Jesus Arockia Sankaran S 

[Nagendra Gupta]

Hello Team

I am getting same error yet.

Below is error and package.json file

ERROR TypeError: Cannot call a class as a function
    at _classCallCheck (vendor.js:120524)
    at new AutoComplete (default~AccountGrp_Entry-AccountGrp_Entry-module~AdminAllocation_Entry-AdminAllocation_Entry-module~~9bdcbb20.js:61639)
    at AutoCompleteComponent._createSuperInternal (vendor.js:687)
    at new AutoCompleteComponent (default~AccountGrp_Entry-AccountGrp_Entry-module~AdminAllocation_Entry-AdminAllocation_Entry-module~~9bdcbb20.js:71671)
    at createClass (vendor.js:82746)
    at createDirectiveInstance (vendor.js:82554)
    at createViewNodes (vendor.js:91605)
    at callViewAction (vendor.js:92151)
    at execComponentViewsAction (vendor.js:92024)
    at createViewNodes (vendor.js:91657)

{

  "name": "ej2-sync",

  "version": "0.0.0",

  "scripts": {

    "ng": "ng",

    "start": "ng serve",

    "build": "ng build",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e"

  },

  "private": true,

  "dependencies": {

    "@agm/core": "^1.0.0-beta.5",

    "@amcharts/amcharts4": "^4.10.10",

    "@angular/animations": "~10.2.4",

    "@angular/cdk": "^8.0.0",

    "@angular/common": "~10.2.4",

    "@angular/compiler": "~10.2.4",

    "@angular/core": "~10.2.4",

    "@angular/flex-layout": "^11.0.0-beta.33",

    "@angular/forms": "~10.2.4",

    "@angular/material": "^8.0.0",

    "@angular/platform-browser": "~10.2.4",

    "@angular/platform-browser-dynamic": "~10.2.4",

    "@angular/router": "~10.2.4",

    "@angular/service-worker": "^8.2.14",

    "@ng-bootstrap/ng-bootstrap": "^5.1.5",

    "@ngx-translate/core": "^11.0.1",

    "@ngx-translate/http-loader": "^4.0.0",

    "@swimlane/ngx-datatable": "15.0.1",

    "@syncfusion/ej2": "^19.1.57",

    "@syncfusion/ej2-angular-buttons": "^19.1.54",

    "@syncfusion/ej2-angular-calendars": "^19.1.56",

    "@syncfusion/ej2-angular-documenteditor": "^19.1.57",

    "@syncfusion/ej2-angular-dropdowns": "^19.1.57",

    "@syncfusion/ej2-angular-grids": "^19.1.57",

    "@syncfusion/ej2-angular-inputs": "^19.1.57",

    "@syncfusion/ej2-angular-lists": "^19.1.56",

    "@syncfusion/ej2-angular-navigations": "^19.1.57",

    "@syncfusion/ej2-angular-notifications": "^19.1.54",

    "@syncfusion/ej2-angular-popups": "^19.1.57",

    "@syncfusion/ej2-angular-richtexteditor": "^19.1.57",

    "@syncfusion/ej2-angular-treegrid": "^19.1.57",

    "@syncfusion/ej2-data": "^19.1.56",

    "@syncfusion/ej2-grids": "^19.1.57",

    "angular-calendar": "^0.27.11",

    "angular-disable-browser-back-button": "^1.0.1",

    "angular-resizable-element": "^3.3.0",

    "angular-tree-component": "8.4.0",

    "clone": "^2.1.2",

    "core-js": "^2.6.11",

    "css-element-queries": "^1.2.3",

    "d3": "^4.9.1",

    "date-fns": "^1.29.0",

    "dragula": "^3.7.2",

    "font-awesome": "4.7.0",

    "hammerjs": "^2.0.8",

    "insert-text-at-cursor": "^0.3.0",

    "jquery": "^3.3.1",

    "jqwidgets-ng": "^8.3.3",

    "karma-jasmine": "^1.1.1",

    "leaflet": "^1.5.1",

    "leaflet-map": "^0.2.1",

    "moment": "^2.22.2",

    "ng2-ace-editor": "^0.3.9",

    "ng2-breadcrumb": "0.5.14",

    "ng2-ckeditor": "1.2.3",

    "ng2-dragula": "^2.1.1",

    "ng2-file-upload": "^1.3.0",

    "ng2-validation": "^4.2.0",

    "ngx-bootstrap": "4.3.0",

    "ngx-color-picker": "^8.0.1",

    "ngx-google-places-autocomplete": "^2.0.4",

    "ngx-json-viewer": "^2.4.0",

    "ngx-json-viewer-scrolling": "^2.3.1",

    "ngx-perfect-scrollbar": "8.0.0",

    "ngx-quill": "^5.2.0",

    "ngx-sortablejs": "^3.1.1",

    "ngx-tour-ng-bootstrap": "^4.1.1",

    "perfect-scrollbar": "^1.5.0",

    "print-js": "^1.6.0",

    "quill": "^1.3.6",

    "rxjs": "~6.6.0",

    "rxjs-compat": "^6.5.4",

    "screenfull": "^4.2.0",

    "simple-line-icons": "^2.4.1",

    "sortablejs": "^1.10.2",

    "tether": "^1.4.6",

    "ts-helpers": "^1.1.2",

    "tslib": "^2.0.0",

    "widgster": "^1.0.0",

    "zone.js": "~0.10.2"

  },

  "devDependencies": {

    "@angular-devkit/build-angular": "~0.1002.1",

    "@angular/cli": "~10.2.1",

    "@angular/compiler-cli": "~10.2.4",

    "@angular/language-service": "^8.0.0",

    "@types/d3": "^3.5.41",

    "@types/googlemaps": "^3.39.6",

    "@types/jquery": "^3.3.22",

    "@types/node": "^12.11.1",

    "@types/nvd3": "^1.8.40",

    "@types/jasmine": "~3.5.0",

    "@types/jasminewd2": "~2.0.3",

    "codelyzer": "^6.0.0",

    "jasmine-core": "~3.6.0",

    "jasmine-spec-reporter": "~5.0.0",

    "karma": "~5.0.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",

    "protractor": "~7.0.0",

    "ts-node": "~8.3.0",

    "tslint": "~6.1.0",

    "typescript": "~4.0.2",

    "webpack-bundle-analyzer": "^3.6.0"

  }

}

[Jesus Arockia Sankaran S]

Hi Nagendra, 

We are sorry to hear that you are still having the same issue. 

We can understand your situation but we are not able to reproduce the reported issue in a simple sample even after using the shared “package.json”. You can find the sample from the following link. 

Sample (with package.json details of previous update): https://www.syncfusion.com/downloads/support/forum/164683/ze/ej2-sync289858750 (run this sample in your machine and let us know the details)  

We request to you ensure the following details from your end to trace the cause of the issue since so many other packages in your application.  

1. Have you installed the Angular 10 CLI? (run “ng –version” and send the screen shot)
2. Whether you can run this sample(https://www.syncfusion.com/downloads/support/forum/164683/ze/ej2-sync1115685990 ) without any issue in your machine?
3. Whether the reported issue is reproduced in all browser or any particular browser?
4. If you can run the sample in #2 without any issue, compare all files with your application configuration files. (.browserslistrc, angular.json, tsconfig.json, tsconfig.app.json)

Reference Image: 

Angular Version: 

 

We are not able to reproduce the reported issue in our end with your “package.json” file and we suspect that you are missing some configurations while upgrading from older version of Angular CLI to latest version. We request you to compare the Angular applications for the difference between them. 

Note: We have tested this application in both Chrome and Firefox. 

Please get back to us with more details. 

Regards, 

Jesus Arockia Sankaran S 

[Jesus Arockia Sankaran S]

Hi Nagendra, 

Also, we request you to check the below links for upgrading Angular applications.  

https://update.angular.io/?v=8.0-10.2 

https://www.angularjswiki.com/angular/update-angular-cli-version-ng-update-to-latest-6-7-versions/ 

https://angular.io/guide/migration-update-module-and-target-compiler-options#update-module-and-target-compiler-options-migration 

Regards, 

Jesus Arockia Sankaran S 

[Vicente José]

Hello,  Nagendra :

I remember I had a similar problem some time ago. I solved deleting the node_modules/@syncfusion folder in my project and npm install again.

Regards,

Vicente García

[Jesus Arockia Sankaran S]

Hi Vicente, 

Thank you for your details. 

Regards, 

Jesus Arockia Sankaran S