Upgrade Syncfuion Version Problem

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.




8 Replies 1 reply marked as answer

JA Jesus Arockia Sankaran S Syncfusion Team April 21, 2021 06:36 AM UTC

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.  


Please get back to us if you have any queries. 

Regards, 
Jesus Arockia Sankaran S 



NG Nagendra Gupta April 22, 2021 09:28 AM UTC

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.




JA Jesus Arockia Sankaran S Syncfusion Team April 23, 2021 09:06 AM UTC

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. 


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 



NG Nagendra Gupta April 26, 2021 04:17 PM UTC

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"
  }
}




JA Jesus Arockia Sankaran S Syncfusion Team April 27, 2021 10:38 AM UTC

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 



JA Jesus Arockia Sankaran S Syncfusion Team April 27, 2021 10:44 AM UTC



VJ Vicente José April 27, 2021 11:02 AM UTC

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

Marked as answer

JA Jesus Arockia Sankaran S Syncfusion Team April 27, 2021 11:53 AM UTC

Hi Vicente, 

Thank you for your details. 

Regards, 
Jesus Arockia Sankaran S 


Loader.
Up arrow icon