[feature request] Angular v17 support

[alebx]

Please add Angular v17 support.

[Malstrime]

As temporary solution, I've installed vanilla dragula@3.7.2 package alongside with ng2-dragula (with --legacy-peer-deps).

[pawelofieldly]

Can we expect an update ? I don't want to install libraries for production with --legacy-peer-deps

[alebx]

The alternative is to override the dependencies in your package.json, e.g.:

"overrides": {
    "ng2-dragula": {
      "@angular/common": "$@angular/common",
      "@angular/core": "$@angular/core",
      "@angular/animations": "$@angular/animations"
    }
  }

[joeskeen]

Does the library work properly if you use --legacy-peer-deps? If so, is it just a tiny pull request to change the required Angular version?

Edit: Looking into the last time Angular version was upgraded, I see that there were WAY more changes than a version bump in peerDependencies . I'm assuming some of the stuff in that PR was unrelated to Angular 16 support?

[alebx]

Yes, the library still works with angular v17 when you do --legacy-peer-deps or --force.

[neverlose-lv]

After installing in my Angular 17 project, I get build error:

ng serve
Node.js version v21.7.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/previous-releases/.
⠇ Building...
✘ [ERROR] TS2307: Cannot find module 'dragula' or its corresponding type declarations. [plugin angular-compiler]

    node_modules/ng2-dragula/DragulaOptions.d.ts:1:50:
      1 │ import { DragulaOptions as OriginalOptions } from 'dragula';
        ╵                                                   ~~~~~~~~~


✘ [ERROR] TS2307: Cannot find module 'dragula' or its corresponding type declarations. [plugin angular-compiler]

    node_modules/ng2-dragula/DrakeWithModels.d.ts:1:22:
      1 │ import { Drake } from 'dragula';
        ╵                       ~~~~~~~~~


✘ [ERROR] TS7016: Could not find a declaration file for module 'dragula'. '/Users/apower/Desktop/important.day/important.day-frontend/node_modules/dragula/dragula.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/dragula` if it exists or add a new declaration (.d.ts) file containing `declare module 'dragula';` [plugin angular-compiler]

    node_modules/ng2-dragula/MockDrake.d.ts:5:22:
      5 │ import { Drake } from 'dragula';

[neverlose-lv]

As a temporary fix, I have installed these:

npm i dragula --legacy-peer-deps
npm i --save-dev @types/dragula

[neverlose-lv]

And now when I run ng serve. I get this runtime error:

[neverlose-lv]

I believe this is because I am using Angular Universal. And the server does not have the document object. I have not found a proper workaround for that.

[joeskeen]

@neverlose-lv I don't use Angular Universal but I'm wondering if there's some way that you can conditionally exclude the element using dragula when not in a browser (i.e. *ngIf or @if(){}? It may even require a dynamic import() too... but I'm not sure.

As an alternative, you may be able to configure your server module (is that still a thing? Otherwise component?) such that it only uses a fake/placeholder for the Dragula stuff when rendering server-side.