Angular 10 update for appliaction generates a warning for canvasjs library

[mlimaye]

When I updated my application to angular 10, it generated the following warning for CanvasJS library usage.

WARNING in /Users/…./src/app/…..component.ts depends on ‘@assets/canvasjs/canvasjs.min’. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Does CanvasJS library has a ECMAScript module to be used with angular 10 applications? Any help to get rid of the warning (don’t want to turn off the warnings though) is appreciated. Thanks.

[Shashi Ranjan]

@mlimaye,

As you are using a non-ECMAScript Module file for your Angular application, whitelisting CanvasJS should work fine in your case. Please refer to the code below for adding a specific CommonJS dependency in the angular.json file:

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "allowedCommonJsDependencies": ["assets/canvasjs/*"]
    }
  }
}

You can also refer to this Stack Overflow thread for more information on whitelisting CommonJS dependencies.

Please take a look at this sample project for a working example with sample code on integrating CanvasJS with Angular.

—
Shashi Ranjan
Team CanvasJS

[mlimaye]

Thanks, it worked! But I believe, it only suppresses the warning, not remove/fix the issue. I hope canvasjs can come up with ECMAScript moduled version of the library.

[Shashi Ranjan]

@mlimaye,

Thanks for your suggestion. We will look into it in future versions.

—
Shashi Ranjan
Team CanvasJS

[sujeet]

Hi,

I am getting this warning after running the Angular 18 ng build command:

▲ [WARNING] Module '@canvasjs/charts' used by 'node_modules/@canvasjs/angular-charts/fesm2015/canvasjs-angular-charts.js' is not ESM

CommonJS or AMD dependencies can cause optimization bailouts.
For more information see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Could you please assist me with this issue?

[Ananya]

@sujeet,

You are getting this warning because angular-charts package uses CommonJS/AMD modules. You can suppress the warning by adding it to allowedCommonJsDependencies under build options in your angular.json file, as shown below:

"build": {
    "options": {
        "allowedCommonJsDependencies": [
            "@canvasjs/angular-charts"
        ],
        ...
    },
    ...
}

Please refer to this angular documentation for more information.

—
Ananya Deka
Team CanvasJS

[sujeet]

Hi Ananya,
I know about “allowedCommonJsDependencies,” but it just suppresses the warning. I want to actually fix the issue.
Thanks

[sujeet]

Hi everyone,

Please ignore my last ticket. I observed that these warnings are coming from the JSPdf package.
Sorry for posting in the wrong forum.