depends on 'highcharts'. CommonJS or AMD dependencies can cause optimization bailouts

[umamaheshbhamidipati]

depends on 'highcharts'. CommonJS or AMD dependencies can cause optimization bailouts getting this is in angular 10

[mateuszkornecki]

Since Angular 10 the Angular CLI outputs warnings if it detects that your browser application depends on CommonJS modules. We are currently in the middle of migration to the ES-modules, but for now, the only thing that could be done is disabling these warnings. To make it work you can add the CommonJS module name to allowedCommonJsDependencies option in the build options located in the angular.json file.

Official guide of configuring the commonJS dependencies:
https://angular.io/guide/build#configuring-commonjs-dependencies

//angular.json
"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
     "allowedCommonJsDependencies": [
        "highcharts"
     ]
     ...
   }
   ...
},

[umamaheshbhamidipati]

added brother... Thank you for responding...

[shanilkv]

Since Angular 10 the Angular CLI outputs warnings if it detects that your browser application depends on CommonJS modules. We are currently in the middle of migration to the ES-modules, but for now, the only thing that could be done is disabling these warnings. To make it work you can add the CommonJS module name to allowedCommonJsDependencies option in the build options located in the angular.json file.

Official guide of configuring the commonJS dependencies: https://angular.io/guide/build#configuring-commonjs-dependencies

//angular.json
"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
     "allowedCommonJsDependencies": [
        "highcharts"
     ]
     ...
   }
   ...
},

Thank you So Much.!!! It's works

[johancollazosdeveloper]

Since Angular 10 the Angular CLI outputs warnings if it detects that your browser application depends on CommonJS modules. We are currently in the middle of migration to the ES-modules, but for now, the only thing that could be done is disabling these warnings. To make it work you can add the CommonJS module name to allowedCommonJsDependencies option in the build options located in the angular.json file.

Official guide of configuring the commonJS dependencies: https://angular.io/guide/build#configuring-commonjs-dependencies

//angular.json
"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
     "allowedCommonJsDependencies": [
        "highcharts"
     ]
     ...
   }
   ...
},

But this option does not solve the problem, it only removes the warning at the time of compilation or execution of the application.

[ddragula]

Hello @johancollazosdeveloper,

You can import Highcharts using ESModules, see: https://www.highcharts.com/docs/getting-started/installation-with-esm

tl;dr:

instead of importing Highcharts & modules this way:

import Highcharts from 'highcharts';
import A11yModule from 'highcharts/modules/accessibility';

A11yModule(Highcharts);

you can import them using es-modules/masters:

import Highcharts from 'highcharts/es-modules/masters/highcharts.src';
import 'highcharts/es-modules/masters/modules/accessibility.src';

or import only the classes you need, e.g.:

import Chart from 'highcharts/es-modules/Core/Chart/Chart.js';
import LineSeries from 'highcharts/es-modules/Series/Line/LineSeries.js';

[PowerKiKi]

@johancollazosdeveloper, a proper and complete solution is documented on #163 (comment)

(ddragula's suggestion will not lazy-load Highcharts, so your app Initial Total size will be much bigger than it needs to be, leading to poor LCP, possibly leading to poorer Google ranking)