Angular 13 Upgrade Release

[pokornyIt]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Sorry, we will not be able to answer every support request.  Please consider other venues for support requests

Current behavior Peer dependency issues with Angular 13 and latest npm.

Expected behavior Not getting this

Reproduction of the problem Use with Angular 13

What is the motivation / use case for changing the behavior? Angular 13

Please tell us about your environment:

• ngx-dnd version: x.x.x

• Angular version: 2.x.x 12

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[Hypercubed]

@pokornyIt Are you having a particular issues running the current release in Angular 13?

[pokornyIt]

Hi, yes. Official version (9.0.0) support only Angular 11.x. I see that you make many updates but without create new version.

[intermx-vignesh]

Any updates on this? I am getting the same peer dependency issue with Angular 13.

[fexxdev]

Is it possible to issue a new nuget versions with the latest commits? Thanks!

[CodingGorilla]

Maybe time to consider upgrading to Angular 14 now that it's released?

[sirawit-suk-xom]

For now, problem about dependency that still depend on angular version 11.

But I have check this link, it already update to version 13 ? https://github.com/swimlane/ngx-dnd/blob/master/projects/swimlane/ngx-dnd/package.json

is there any solution to solve this?

[fexxdev]

Any update? We're using this lib on production webapp, releasing the npm package of the latest commit should be enough. Thanks!

[Hypercubed]

Hi everyone... I understand your concerns. We would love to upgrade but, at this moment, we're not in a position to consume Angular modules beyond v12. We will as soon as possible.

[demilsson]

Please, can you revisit this issue with the library being incompatible with Angular 13 & 14? If you are working on issues, is there anything the community can do to help getting it released?

[tpartee-zspace]

Angular 15 upgrade, and still can't update cleanly due to this package. Isn't it just a few numbers you need to change in your NPM distro? I'd do it for you, but I can't. ;)

[JTHOUMEL]

@Hypercubed : any news about it ?

[JTHOUMEL]

For information, we figured out how to solve that issue. :)

We have added the source code directly into our project, into a "libraries" folder. And then we only have updated the paths to those integrated "ngx-dnd" source code. Nothing else was necessary to have our project working with "ngx-dnd" and with Angular 12,13,14 and 15.

[aliaafreen]

@JTHOUMEL would you please confirm the path ngx-dnd source code, will below one is correct?

https://github.com/swimlane/ngx-dnd/tree/master/projects/swimlane/ngx-dnd

[JTHOUMEL]

@aliaafreen

No, we used these one:

https://github.com/swimlane/ngx-dnd/tree/master/projects/swimlane/ngx-dnd/src

[aliaafreen]

This directory added to our existing project but still have issues related to import * as dragulaNamespace from '@swimlane/dragula'; and if i am forcefully installing still remains the error

[JTHOUMEL]

In the package.json file, we replaced "@swimlane/ngx-dnd": "SOME_NGX_DND_VERSION", by "@swimlane/dragula": "SOME_DRAGULA_VERSION". SOME_DRAGULA_VERSION has to be the @swimlane/dragula version needed by the @swimlane/ngx-dnd version you copied into your project (if you copied the @swimlane/dragula sources directly from Github, then you copied the last @swimlane/ngx-dnd version. That @swimlane/ngx-dnd version needs @swimlane/dragula version ^3.8.0, so SOME_DRAGULA_VERSION = ^3.8.0).

In the modules where NgxDnDModule is imported, we replaced import { NgxDnDModule } from '@swimlane/ngx-dnd'; by import { NgxDnDModule } from 'SOME_RELATIVE_PATH/libraries/ngx-dnd/src/public_api';. SOME_RELATIVE_PATH depends on the location you copied the @swimlane/dragula sources.

[eighties8]

@JTHOUMEL thanks for your help here. I am almost there with converting the ngx-dnd/src & dragula libraries to my app local library in my project but I'm getting the error below. Any ideas?

Compiling with Angular sources in Ivy full compilation mode. projects/my-app/src/lib/shared/builder/@swimlane/ngx-dnd/src/lib/directives/ngx-droppable.directive.ts:26:14 - error NG3001: Unsupported private class DroppableDirective. This class is visible to consumers via MyAppModule -> WidgetLibraryModule -> NgxDnDModule -> DroppableDirective, but is not exported from the top-level library entrypoint.

26 export class DroppableDirective implements OnInit, OnDestroy, AfterViewInit {

projects/my-app/src/lib/shared/builder/@swimlane/ngx-dnd/src/lib/directives/ngx-draggable.directive.ts:12:14 - error NG3001: Unsupported private class **DraggableDirective**. This class is visible to consumers via MyAppModule -> WidgetLibraryModule -> NgxDnDModule -> DraggableDirective, but is not exported from the top-level library entrypoint.

**_12 export class DraggableDirective implements OnInit, OnDestroy {_**

projects/my-app/src/lib/shared/builder/@swimlane/ngx-dnd/src/lib/directives/ngx-drag-handle.directive.ts:9:14 - error NG3001: Unsupported private class DragHandleDirective. This class is visible to consumers via MyAppModule -> WidgetLibraryModule -> NgxDnDModule -> DragHandleDirective, but is not exported from the top-level library entrypoint.

9 export class DragHandleDirective {}

[Delagen]

1. Install @swimlane/dragula, @types/dragula
2. Copy library source for example to <root>/3rdparty/@swimlane/ngx-dnd
3. Add index.ts to root of lib

   /// <reference path="./dragula.d.ts" />
   export * from './public_api';

4. Add dragula.d.ts

   /// <reference types="dragula"/>
   declare module '@swimlane/dragula' {
   export = dragula;
   }

5. Add to tsconfig.compilerOptions.paths

   "paths": {
     "@swimlane/ngx-dnd": [
       "./3rdparty/@swimlane/ngx-dnd"
     ],
   }

[eighties8]

@Delagen, thanks for your reply.

Can you tell me if my understanding below is complete? All I need to copy into my project is the ngx-dnd/src folder. I will still reference the other libraries as before from node_modules correct?

Meaning, "@swimlane/dragula": "3.8.0", and "@types/dragula": "^3.7.0", DO NOT NEED TO BE COPIED LOCAL, correct?

[Delagen]

Yes, dragula* in npm modules, no changes in project code

[eighties8]

OK, thanks for below...

3. Add index.ts to root of lib

Here? Where I have copied the ngx-dnd/src?

projects/my-library/src/lib/shared/builder/@swimlane/ngx-dnd/src/lib/index.ts

[Delagen]

[eighties8]

Where does dragula.d.ts come from? I can't locate it from any of the source directories. I suppose you mean to create the file as new and paste in the code correct? It appears I'm getting a duplicate identifier since its already declated in declarations.d.ts

[eighties8]

Here's what I have.

[eighties8]

Just trying to clarify because I'm getting below errors on build:

✖ Compiling with Angular sources in Ivy full compilation mode. projects/my-proj-lib/src/lib/shared/builder/@swimlane/ngx-dnd/src/lib/services/drake-store.service.ts:1:1 - error TS6059: File '/Users/1234567/Documents/projects/my-ng-upgrade/projects/my-proj-lib/src/lib/shared/builder/@swimlane/ngx-dnd/src/lib/services/drake-store.service.ngtypecheck.ts' is not under 'rootDir' '/Users/1234567/Documents/projects/my-ng-upgrade/projects/my-form-builder/src'. 'rootDir' is expected to contain all source files.

1 import { Injectable } from '@angular/core';

[Delagen]

Seem in some of your configs present rootDir directive. Source of library compiled with main application should be in one rootDir scope, or project. If you wish to move it outside project dir, you can mount as compiled dependency lib in angular-cli project, or compile it yourself.

/Users/1234567/Documents/projects/my-ng-upgrade/projects/my-form-builder/src

/Users/1234567/Documents/projects/my-ng-upgrade/projects/my-proj-lib/ placed outside root of project

[eighties8]

Ok, I don't have rootDir in any search of my project. Perhaps the issue is with a setup step I'm missing in your Step 4 above. I've added a new file dragula.d.ts at:

projects/library/@swimlane/ngx-dnd/dragula.d.ts

With contents of the file as:

declare module '@swimlane/dragula' { export = dragula; } But I'm seeing this:

[Delagen]

Seems you can remove this file with link from index.ts, because your tsconfig.json tuned to include d.ts files from everywhere. Or you can remove declarations.d.ts. Choose what you want

[eighties8]

OK, thanks for that. Really appreciate your help. Next thing is this:

"Cannot find name 'dragula'.ts(2304)"

[eighties8]

I must be overlooking something simple. Does anyone have a stackblitz for what this looks like when consuming a library locally within another library?

My project is structured as:

project-1 (consumes ngx-dnd) project-2 (consumes ngx-dnd) src/app (main application here consumes both project/libraries above)

I have placed the ngx-dnd/src directory from github inside of Project 2 above.

And I have a tsconfig.json in project-1 that extends the src/app directory's tsconfig.base.json and references the path to @swimlane/ngx-dnd as:

"paths": {
      "@swimlane/ngx-dnd": ["./lib/shared/@swimlane/ngx-dnd"],
    },

And I have a tsconfig.json in project-2 that references the path to @swimlane/ngx-dnd inside project 1 as:

"paths": {
      "@swimlane/ngx-dnd": ["./projects/project 1/src/lib/shared/@swimlane/ngx-dnd"],
    },

[eighties8]

An update on my progress from above:

It appears that my VS Code was caching my tsconfig.json paths to still point to node_modules. After doing a "reload window" on the VS Code, the path aliases for the "@swimlane/ngx-dnd" references resolved as expected to the local library.

Now upon compiling my project I'm getting this error:

✖ Compiling with Angular sources in Ivy full compilation mode.
Debug error: 
DtsModuleScopeResolver.read(NgxDnDModule from /Users/123456/Documents/projects/app-ng-upgrade/projects/my-project/src/lib/shared/@swimlane/ngx-dnd/lib/ngx-dnd.module.ts), 
but not a .d.ts file