Angular 10 build warning

[spock123]

After upgrading to Angular 10 we get these warnings when doing builds:

WARNING in /Users/lrj/project/mother-qorder/admin/node_modules/ng2-dragula/__ivy_ngcc__/dist/fesm2015/ng2-dragula.js depends on dragula. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

[smlombardi]

there are more warnings:

WARNING in .../node_modules/ng2-dragula/__ivy_ngcc__/dist/fesm2015/ng2-dragula.js depends on dragula. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in.../node_modules/dragula/dragula.js depends on contra/emitter. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in .../node_modules/dragula/dragula.js depends on crossvent. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

[codekrafter]

This is because as of Angular 10.0, Angular will output a warning for all CommonJS dependencies, as they impact the tree-shaking of applications (this link explains it: https://web.dev/commonjs-larger-bundles/).

To fix this warning all packages referenced in the warnings (dragula, contra/emitter and crossvent) need to be released as es2015 modules.

[jziggas]

With regards to Angular 10 compatibility there is also this error which can prevent builds from passing:

node_modules/ng2-dragula/dist/components/dragula.module.d.ts:3:23 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).

3     static forRoot(): ModuleWithProviders;

[centigradeclemensP]

this could be fixed by changing it to
static forRoot(): ModuleWithProviders<any>;

[prsevero]

Just a hotfix, until we don't get an update on this.

You can add the flag "skipLibCheck": true to your tsconfig.app.json, under compilerOptions.

[smlombardi]

Ditched it and moved to Angular Material's drag and drop. Much simpler to use.

[2ndClemens]

Angular Material CDK doesn't support drag and drop in a grid with wrapping, if you need that, ng2-dragula is still a valid choice.
angular/components#13372

[Gillardo]

Will this be done in the next version?

[Gillardo]

Month later and no reply?? Is this being done or has this package been abandoned?

[jziggas]

Fixed in 1008, awaiting version bump and release.

Edit: Shoutout to @centigradeclemensP for providing the fix.

[jziggas]

I think the version of Angular in the demo folder needs to be updated in order for the build to pass.

[jziggas]

I tried to upgrade the demo's package.json but a slew of errors from ng-packagr occurred and I gave up. As well as what I think are red herrings like linting and unit test errors because it doesn't seem like those were kept up to date for the demo. I don't think I'm familiar enough with yarn and ng-packagr to fix the rest.

[Peter-Zakharevich]

Hi everyone!
Сould you please tell when we can expect a new release version with a fix for this issue?

[nealpatil01]

Sad to say that - I replaced ng2-dragula with ngx-bootstrap because of this warning.

[sampath13]

Hello Maintainer,

Is the fix released ?

[ulrichmueller]

Hello.

Is there any date set for a new npm package for newer Angular Versions? Thanks for the great work anyway. :)

Best regards.

[Xaivteev]

Seconding ulrichmueller's request.
@jziggas

[m-wheeler]

I want this too

[rg1220]

@cormacrelf, @valorkin, @jziggas - Just curious if this will ever get published to NPM?