Angular 10 - CommonJS or AMD dependencies can cause optimization bailouts

Angular 10 - CommonJS or AMD dependencies can cause optimization bailouts

Posted by: chhavi.sethi on 1 July 2020, 1:58 am EST

• 

  chhavi.sethi

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 1 July 2020, 1:58 am EST

  Hi,

  I have upgraded the Angular project to the Angular versions 10 and after upgrading it gives the following warnings.

  WARNING in abc.module.ts depends on @grapecity/wijmo.angular2.grid. CommonJS or AMD dependencies can cause optimization bailouts.

  WARNING in abc.module.ts depends on @grapecity/wijmo.angular2.grid.filter. CommonJS or AMD dependencies can cause optimization bailouts.

  WARNING in abc.module.ts depends on @grapecity/wijmo.angular2.input. CommonJS or AMD dependencies can cause optimization bailouts.

  Need help with this, how can I fix those warnings.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 1 July 2020, 5:08 pm EST

  Hi Chavi,
  
  Please refer to the following blog for reference:
  
  https://www.grapecity.com/blogs/wijmo-supports-angular-10

  Angular is urging developers to move to ECMAScript modules (ESM). Wijmo’s default format is still CommonJS, so you will see a warning in Angular 10 about our modules. However, the Wijmo components will still function normally at runtime.

  The team is working on fixing the issue as soon as possible.

  Regards,
  
  Manish Gupta

• 

  chhavi.sethi

  • Post Options:
  • Link
    Copy

  Posted 2 July 2020, 1:11 am EST

  Thanks, Manish

  It is good to hear that Wijmo is about to support ESM modules. I believe it is a good step to evolve the Wijmo.

  Is there any plan when the ESM modules will be available?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 2 July 2020, 8:26 pm EST

  Hi Chavvi,
  
  The team is trying to fix it as soon as possible and it will be available in the next hotfix release.

  Regards,
  
  Manish Gupta

• 

  alex.ivanenko

  • Post Options:
  • Link
    Copy

  Posted 22 July 2020, 3:18 am EST

  We released build 5.20202.699 today:
  
  https://www.grapecity.com/blogs/wijmo-release-2020-v2
  
  It has ESM modules enabled by default, which eliminates the problem with CJS warning in Angular 10, and also allows to get a smaller bundle when compiled with the --prod flag.
  
  If you are still on Angular 8 or earlier, this additional info about the matter might be useful:
  
  https://www.grapecity.com/wijmo/docs/GettingStarted/Angular-Components#disabling-es-modules-in-angular-8-and-lower

  Thanks,
  
  Alex

• 

  gceditor

  • Post Options:
  • Link
    Copy

  Posted 24 August 2020, 5:16 am EST

  Welcome to the GrapeCity forum! The post below has been answered, and has also been made into a full tutorial. See below for the forum discussion, or visit this blog post about Decreasing Bundle Sizes with ES Modules in Angular 10:

  https://www.grapecity.com/blogs/decreasing-bundle-sizes-with-es-modules-in-angular-10