Property 'on' in type 'MockDrake' is not assignable to the same property in base type 'DrakeWithModels'

[rkgoswami]

This issue was not there when I started using this library but later on, found this issue (shown in attachment below):

Issue is very simple:

• Drag interface has a method on(events: string, callback: Function): Drake; => file index.d.ts
• Interface DrakeWithModels extends Drake
• Class MockDrake implements DrakeWithModels, where method on(events: string, callback: Function): void; is overriden but the return type is changed, which is not allowed.

Fix is simple change the return type for method on in Interface Drag to void;

[a-nasstrom]

same problem angular 7.0.0

[a-nasstrom]

[adlerzz]

I've solved this problem by adding
"@types/dragula": "2.1.33",
to my package.json

[peteichuk]

I've solved this problem by
@angular/cdk/drag-drop

[vladimiry]

If you go with Yarn add this as a workaround to your package.json:

  "resolutions": {
    "ng2-dragula/**/@types/dragula": "2.1.33"
  }

[tomson7777]

same problem today, Angular 6.1.0

[petterlabraaten]

[email protected] expects @types/dragula@^2.1.33, so I solved it by globally uninstalling @types/dragula (which was version 2.1.34) and installing 2.1.33 instead.

[wizquest-labs]

@adlerzz 's solution definitely helped

[ramyatrouny]

@petterlabraaten can you tell me how to do it ? because i can't find the @types/dragula in my package.json

[a-nasstrom]

npm i @types/dragula

[ramyatrouny]

@Razor164 even after installing the types dragula, reconfigure the package.json to 2.1.33 do the npm install again i am facing the same problem how did you solve it ?

[skydever]

I did npm install @types/[email protected] --save-dev and it solved the issue on my side

@mba3gar are you sure you installed 2.1.33? you can run npm install @types/[email protected] --save-dev again to be sure (and I would set it as dev dependency) ...

[ramyatrouny]

am using the following dragula for ionic mobile application, it works fine and smoothly on web with ionic serve but once i push it to mobile i face the same issue with MockService thing.
i wonder how i can solve this weird issue @skydever

[rkgoswami]

@petterlabraaten can you tell me how to do it ? because i can't find the @types/dragula in my package.json

Go to your package.json of your project and add "@types/dragula": "2.1.33" into your "dependencies": { } . And the do, npm i
or you can do as suggested by @skydever

[ramyatrouny]

Thank you guys my problem is fixed @skydever @rkgoswami @Razor164 well appreciated

[dilotec-2015]

the same problem :(

[hermosillaeveris]

The problem is interface declaration in index.d.ts:

interface Drake {
    containers: Element[];
    dragging: boolean;
    start(item:Element): void;
    end(): void;
    cancel(revert:boolean): void;
    cancel(): void;
    remove(): void;
    **on(events: string, callback: Function): Drake;**
    destroy(): void;
}

MockDrake.d.ts constructor no is valid:

constructor(containers?: Element[], options?: DragulaOptions, models?: any[][]);
dragging: boolean;
start(item: Element): void;
end(): void;
cancel(revert: boolean): void;
cancel(): void;
remove(): void;
private emitter$;
private subs;
**on(event: string, callback: Function): void;**
destroy(): void;

It needs to be changed by:

constructor(containers?: Element[], options?: DragulaOptions, models?: any[][]);
dragging: boolean;
start(item: Element): void;
end(): void;
cancel(revert: boolean): void;
cancel(): void;
remove(): void;
private emitter$;
private subs;
**on(event: string, callback: Function): Drake;**
destroy(): void;

[rkgoswami]

on(events: string, callback: Function): Drake;

But please verify if the method on(event: string, callback: Function) really return anything or the mistake is in the interface definition.

interface Drake {
    ...

    on(event: string, callback: Function): Drake; //Drake => void , if it does not return anything
}

[hermosillaeveris]

It like interface mistake:

on method return void:

 */
on(event, callback) {
    this.subs.add(this.emitter$
        .pipe(filter(({ eventType }) => eventType === event))
        .subscribe(({ args }) => {
        callback(...args);
    }));
}

It is the interface that should be changed, sorry

interface Drake {
    containers: Element[];
    dragging: boolean;
    start(item:Element): void;
    end(): void;
    cancel(revert:boolean): void;
    cancel(): void;
    remove(): void;
    on(events: string, callback: Function): void;
    destroy(): void;
}

[rkgoswami]

It like interface mistake:

on method return void:

 */
on(event, callback) {
    this.subs.add(this.emitter$
        .pipe(filter(({ eventType }) => eventType === event))
        .subscribe(({ args }) => {
        callback(...args);
    }));
}

It is the interface that should be changed, sorry

interface Drake {
containers: Element[];
dragging: boolean;
start(item:Element): void;
end(): void;
cancel(revert:boolean): void;
cancel(): void;
remove(): void;
on(events: string, callback: Function): void;
destroy(): void;
}

Then we should raise a issue on dragula library (dependent library of ng2-dragula) => https://github.com/bevacqua/dragula

[katesowles]

I rolled back to [email protected] and kept to @types/[email protected] and that seemed to fix the error that prevented my build from succeeding.

UPDATE: here's my subdependency versions, package versions, and global install versions in case that provides any insight into why I'm no longer getting the error with the combination above

subdependencies of ng-dragula:

├─┬ [email protected]
│ └─┬ [email protected]
│   ├─┬ [email protected]
│   │ ├── [email protected]
│   │ └── [email protected]
│   └─┬ [email protected]
│     └── [email protected] deduped

package versions:

"@angular/common": "7.0.1",
"@angular/compiler": "7.0.1",
"@angular/core": "7.0.1",
"@angular/forms": "7.0.1",
"@angular/http": "7.0.1",
"@angular/platform-browser": "7.0.1",
"@angular/platform-browser-dynamic": "7.0.1",
"@angular/router": "7.0.1",
"@ng-bootstrap/ng-bootstrap": "4.0.0",
"@types/core-js": "2.5.0",
"@types/dragula": "2.1.33",
"@types/jasmine": "2.8.9",
"@types/jasminewd2": "2.0.5",
"@types/node": "10.12.1",
"@uirouter/angular": "2.0.2",
"@uirouter/core": "5.0.21",
"@uirouter/rx": "0.5.0",
"angular-router-loader": "0.8.5",
"angular2-template-loader": "0.6.2",
"awesome-typescript-loader": "5.2.1",
"bootstrap": "4.1.3",
"classlist-polyfill": "1.2.0",
"compression-webpack-plugin": "2.0.0",
"core-js": "2.5.7",
"css-loader": "1.0.1",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "2.0.0",
"font-awesome": "4.7.0",
"ie-shim": "0.1.0",
"ie9-oninput-polyfill": "1.1.1",
"intl": "1.2.5",
"istanbul-instrumenter-loader": "3.0.1",
"jasmine-core": "3.3.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "3.1.1",
"karma-chrome-launcher": "2.2.0",
"karma-coverage": "1.1.2",
"karma-coverage-istanbul-reporter": "2.0.4",
"karma-jasmine": "1.1.2",
"karma-jasmine-html-reporter": "1.4.0",
"karma-phantomjs-launcher": "1.0.4",
"karma-sourcemap-loader": "0.3.7",
"karma-typescript-preprocessor": "0.4.0",
"karma-webpack": "3.0.5",
"ng2-dragula": "2.0.4",
"node-sass": "4.9.4",
"phantomjs-prebuilt": "2.1.16",
"popper.js": "1.14.4",
"proxy-polyfill": "0.3.0",
"raw-loader": "0.5.1",
"rxjs": "6.3.3",
"sass-loader": "7.1.0",
"style-loader": "0.23.1",
"to-string-loader": "1.1.5",
"traceur": "0.0.111",
"tslint": "5.11.0",
"typescript": "3.1.4",
"uglifyjs-webpack-plugin": "2.0.1",
"webpack": "4.23.1",
"webpack-cli": "3.1.2"
"zone.js": "0.8.26"

and relevant global installs:

[email protected]
[email protected]

maybe this provides some context/help, @carl-parrish?

[koraysels]

I didn't have this problem in 7.0.0. But now I do. I havent changed a thing. super weird.
The only thing that worked was npm install with yarn it didn't do the trick. i can't wrap my head arround it, but there it is..

[carl-parrish]

running into the same problem but so far setting to @types/[email protected] isn't working (with [email protected])

[VladimirValov]

100% solution
"ng2-dragula": "2.0.0",
"@types/dragula": "2.1.33"

Since [email protected] and great has dependencies "@types/dragula": "^2.1.33".
In this case we will have version 2.1.34

[cormacrelf]

Please see #912 (comment)

[pranavjeet123]

just remove ng-dragula from package.json file . Now run this cli command which will bring latest ng-dragula "^2.1.1".
npm i ng2-dragula.

It solves the problem .

[Akhi1]

I've solved this problem by adding
"@types/dragula": "2.1.33",
to my package.json

Worked for me. Thank you @adlerzz