Errors and fails to load chart in production after upgrading angular version to 8.2

Question

I get the below error when I do ng serve --prod. And it only fails when target is "es2015" and works when I change it to es5.TypeError: Class constructor PathOption cannot be invoked without 'new'    at new RectOption (2.8776470ce29e8b41b3cf.js:1)    at StripLine.renderStripLine (2.8776470ce29e8b41b3cf.js:1)    at ComponentBase.renderAxes (2.8776470ce29e8b41b3cf.js:1)    at ComponentBase.renderElements (2.8776470ce29e8b41b3cf.js:1)    at ComponentBase.refreshBound (2.8776470ce29e8b41b3cf.js:1)    at ComponentBase.processData (2.8776470ce29e8b41b3cf.js:1)    at ComponentBase.render (2.8776470ce29e8b41b3cf.js:1)    at ComponentBase.appendTo (2.8776470ce29e8b41b3cf.js:1)    at 2.8776470ce29e8b41b3cf.js:1    at ZoneDelegate.invokeTask (polyfills.276f3df19e5827931cfa.js:1)I recently upgraded my application from Angular 7 to 8.2 and also upgraded syncfusion to 17.4.49. My entire app works fine after upgrade except for the charts in production.Below is some parts of my package.json file for your reference      "dependencies": {    "@angular/animations": "8.2.14",    "@angular/cdk": "^8.2.3",    "@angular/common": "8.2.14",    "@angular/compiler": "8.2.14",    "@angular/core": "8.2.14",    "@angular/forms": "8.2.14",    "@angular/material": "^8.2.3",    "@angular/platform-browser": "8.2.14",    "@angular/platform-browser-dynamic": "8.2.14",    "@angular/router": "8.2.14",    "@syncfusion/ej2-angular-charts": "^17.4.49",    "@syncfusion/ej2-angular-circulargauge": "^17.4.47",    "@syncfusion/ej2-charts": "^17.4.49",   "syncfusion-javascript": "^17.4.46",},  "devDependencies": {    "@angular-devkit/build-angular": "~0.803.25",    "@angular-devkit/build-ng-packagr": "~0.803.25",    "@angular-devkit/core": "^8.3.4",    "@angular/cli": "^8.3.25",}I want to be able to use differential loading with target set to es2015. Is there any version mismatch? Thanks,Aparna

Srihari Muthukaruppan · Answer

Hi Aparna, 

We have analyzed your query. From that, we would like to let you know that the chart is working fine while upgrading angular version from 7 to 8.2. We also tried setting target as 6th edition ECMAScript 2015 (ES6). Unfortunately we are unable to reproduce the reported scenario. We have also attached the sample used for testing. Please find the below sample, code snippet and screenshot. 
   
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular8Sample1138524461.zip   
  
Code Snippet:  




// add your additional code here 
"dependencies": { 
    "@angular/animations": "~8.2.14", 
    "@angular/common": "~8.2.14", 
    "@angular/compiler": "~8.2.14", 
    "@angular/core": "~8.2.14", 
    "@angular/forms": "~8.2.14", 
    "@angular/platform-browser": "~8.2.14", 
    "@angular/platform-browser-dynamic": "~8.2.14", 
    "@angular/router": "~8.2.14", 
    "@syncfusion/ej2-angular-charts": "^17.4.49", 
    "@syncfusion/ej2-angular-dropdowns": "^17.4.49", 
    "rxjs": "~6.4.0", 
    "tslib": "^1.10.0", 
    "zone.js": "~0.9.1" 
  }, 
  "compilerOptions": { 
    "outDir": "./dist/out-tsc/app", 
    "sourceMap": true, 
    "declaration": false, 
    "moduleResolution": "node", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "target": "es6", 
    "module": "esnext", 
    "typeRoots": [ 
      "node_modules/@types" 
    ], 
    "lib": [ 
      "es6", 
      "dom" 
    ], 
    "baseUrl": "./src" 
  }, 
  "devDependencies": { 
    "@angular-devkit/build-angular": "~0.803.22", 
    "@angular/cli": "~8.3.22", 
    "@angular/compiler-cli": "~8.2.14", 
    "@angular/language-service": "~8.2.14", 
    "@types/jasmine": "~3.3.8", 
    "@types/jasminewd2": "~2.0.3", 
    "@types/node": "~8.9.4", 
    "codelyzer": "^5.0.0", 
    "jasmine-core": "~3.4.0", 
    "jasmine-spec-reporter": "~4.2.1", 
    "karma": "~4.1.0", 
    "karma-chrome-launcher": "~2.2.0", 
    "karma-coverage-istanbul-reporter": "~2.0.1", 
    "karma-jasmine": "~2.0.1", 
    "karma-jasmine-html-reporter": "^1.4.0", 
    "protractor": "~5.4.0", 
    "ts-node": "~7.0.0", 
    "tslint": "~5.15.0", 
    "typescript": "~3.5.3", 
    "webpack-bundle-analyzer": "^3.6.0" 
  } 
 
Screenshot: 
  
 
If you still face this issue. Please share the following information which will be more helpful for further analysis and provide you the solution sooner.  


Try to reproduce the reported scenario in the above sample


Please share the datasource file.


Share the details if you have done any other customization in your sample.
 
Let us know if you have any concerns. 
  
Regards, 
Srihari M

Aparna Pyla · Answer

Hi Srihari,This error occurs only in production when we do ng serve --prod. Can you confirm that you served the application as production? Thanks,Aparna

Aparna Pyla · Answer

Hi Srihari,According to Syncfusion documentation (https://help.syncfusion.com/angular/gettingstarted/getting-started-angular-cli)I added external dependencies  Jquery and ej.web.all and syncfusion-javascript during the development process.     "@syncfusion/ej2-angular-charts": "^17.4.49",    "@syncfusion/ej2-angular-circulargauge": "^17.4.47",    "@syncfusion/ej2-charts": "^17.4.49",    "syncfusion-javascript": "^17.4.46",In devDependencies:     "@types/ej.web.all": "^16.4.2",    "@types/jquery": "^3.3.29",How come your sample project don't have these in your package.json and no mention of  "types": [ "jquery", "ej.web.all" ] in compiler options and yet your app works fine? Don't we require these in newer version of Syncfusion? Also, I want to mention, I use only charts and circular gauge syncfusion components in my project.  I'm trying to make a reproduction of the issue but first I also want to know if these dependencies are required or not.Thanks,Aparna

Durga Gopalakrishnan · Answer

Hi Aparna, 
 
We have analyzed your queries. Please check with the below suggested options. 
 
#1 : Can you confirm that you served the application as production? 
 
Yes, we have used the command ng serve --prod to run the application. It is working fine. 
 
#2 : How come your sample project don't have these in your package.json and no mention of  "types": [ "jquery", "ej.web.all" ] in compiler options 
 
These dependencies are required only when you are using EJ1 components in your angular application. 
 
#3 : Don't we require these in newer version of Syncfusion? 
 
If you are using only EJ2 components, these dependencies are not required.  
 
#4 : I also want to know if these dependencies are required or not 
 
If you want to use both EJ1 and EJ2 components together in an angular application, then you need to include these dependencies in package.json file. 
 
Note: Similar component from EJ1 and EJ2 platform cannot be used together. You need to choose the component in either EJ1 or EJ2 platform. 
 
Please revert us, if you have any concerns. 
 
Regards, 
Durga G

Aparna Pyla · Answer

Hi,Since I use only EJ2 components, I uninstalled all these packages and removed any references to them from my project and that fixed my original issue.    "@syncfusion/ej2-charts": "^17.4.49",    "syncfusion-javascript": "^17.4.46",In devDependencies:     "@types/ej.web.all": "^16.4.2",    "@types/jquery": "^3.3.29"I wish I knew this before that these references are required only for EJ1 components. 
No where in the documention https://help.syncfusion.com/angular/gettingstarted/getting-started-angular-cli its mentioned.

Anyways, Srihari and Durga thanks for the support.Aparna

Durga Gopalakrishnan · Answer

Hi Aparna, 
  
Most welcome. Kindly get in touch with us, if you need any further assistance. We are always happy in assisting you.  
  
Regards, Durga G