Column and Row reorder issues

[Andrew Alderson]

What is the expected behavior?

Column and row reordering should work.

What is the current behavior?

In the current 2.0.0-rc.1 release column and row reorder is not working. This seems to be a problem with the PblNgridDragModule. Removing this module fixes the issues.

I cloned the sample app found here https://github.com/shlomiassaf/ngrid-material-starter and when running it I get the following errors

Uncaught NullInjectorError: R3InjectorError(AppModule)[InjectionToken CDK_DRAG_CONFIG -> InjectionToken CDK_DRAG_CONFIG -> InjectionToken CDK_DRAG_CONFIG]: 
  NullInjectorError: No provider for InjectionToken CDK_DRAG_CONFIG!
    at NullInjector.get (http://localhost:4200/vendor.js:41773:27)
    at R3Injector.get (http://localhost:4200/vendor.js:55489:33)
    at R3Injector.get (http://localhost:4200/vendor.js:55489:33)
    at R3Injector.get (http://localhost:4200/vendor.js:55489:33)
    at NgModuleRef$1.get (http://localhost:4200/vendor.js:72821:33)
    at Object.get (http://localhost:4200/vendor.js:70657:35)
    at getOrCreateInjectable (http://localhost:4200/vendor.js:45551:39)
    at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:59388:12)
    at NodeInjectorFactory.PblNgridDragResizeComponent_Factory [as factory] (http://localhost:4200/vendor.js:120990:710)
    at getNodeInjectable (http://localhost:4200/vendor.js:45696:44)

Uncaught Error: Multiple components match node with tagname pbl-ngrid-drag-resize
    at throwMultipleComponentError (core.js:8043)
    at findDirectiveDefMatches (core.js:12856)
    at resolveDirectives (core.js:12610)
    at elementStartFirstCreatePass (core.js:20975)
    at Module.ɵɵelementStart (core.js:21016)
    at CommonTableTemplatesComponent_pbl_ngrid_drag_resize_2_Template (common-table-templates.component.html:11)
    at executeTemplate (core.js:11949)
    at renderView (core.js:11735)
    at TemplateRef.createEmbeddedView (core.js:15256)
    at ViewContainerRef.createEmbeddedView (core.js:15363)

What are the steps to reproduce?

Clone the sample app at https://github.com/shlomiassaf/ngrid-material-starter do an npm install and run ng serve. Note: I did upgrade all packages to the current versions (expect Typescript) because I was getting this error "export '_getShadowRoot' was not found in '@angular/cdk/platform' when I compiled.

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

"dependencies": {
    "@angular-devkit/build-optimizer": "^0.900.7",
    "@angular/animations": "~9.0.7",
    "@angular/cdk": "~9.1.3",
    "@angular/cdk-experimental": "^9.1.3",
    "@angular/common": "~9.0.7",
    "@angular/compiler": "~9.0.7",
    "@angular/core": "~9.0.7",
    "@angular/forms": "~9.0.7",
    "@angular/material": "^9.1.3",
    "@angular/platform-browser": "~9.0.7",
    "@angular/platform-browser-dynamic": "~9.0.7",
    "@angular/router": "~9.0.7",
    "@nrwl/angular": "9.1.2",
    "@nrwl/workspace": "^9.1.2",
    "@pebula/ngrid": "~2.0.0-rc.1",
    "@pebula/ngrid-material": "~2.0.0-rc.1",
    "@pebula/utils": "^1.0.2",
    "core-js": "^3.6.4",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.11.1",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.7",
    "@angular/cli": "9.0.7",
    "@angular/compiler-cli": "~9.0.7",
    "@angular/language-service": "~9.0.7",
    "@nrwl/cypress": "9.1.2",
    "@types/jasmine": "~3.5.9",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "^13.9.2",
    "codelyzer": "^5.2.1",
    "cypress": "^4.2.0",
    "cypress-image-snapshot": "^3.1.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.1",
    "karma-jasmine": "~3.1.1",
    "karma-jasmine-html-reporter": "^1.5.2",
    "prettier": "2.0.1",
    "protractor": "~5.4.3",
    "ts-node": "~8.8.1",
    "tslint": "~6.1.0",
    "typescript": "~3.7.5"
  }

Is there anything else we should know?

These errors happen when compiling with Ivy or with View Engine.

[Franco Valerio]

Hello,

I have the same issue, just wondering if you fixed it?

[Franco Valerio]

Hey, downgrading @angular/material and @angular/cdk to version 9.0.1 (the same as the ngrid-material-starter proyect) fixed it for me. Maybe something from 9.1.x from those package makes ngrid incompatible

[Andrew Alderson]

Found the issue.

In the 9.0.X branch this class https://github.com/angular/components/blob/9.0.x/src/cdk/drag-drop/directives/drag.ts has the injection token defined and it is injected into the constructor as
@Inject(CDK_DRAG_CONFIG) config: DragRefConfig

In the 9.1.x branch the class https://github.com/angular/components/blob/9.1.x/src/cdk/drag-drop/directives/drag.ts doesn't have the injection token defined and in the constructor it is marked as optional
@Optional() @Inject(CDK_DRAG_CONFIG) config: DragDropConfig

The PblNgridDragResizeComponent needs to have the constructor argument
@Inject(CDK_DRAG_CONFIG) private _config: DragRefConfig marked as @Optional

[Shlomi Assaf]

Yes, the cdk drag and drop are not friendly when it comes to inheritance.

Strange, as those are part of a development kit ...

I will fix it

[Shlomi Assaf]

Fixed in Version 2.0.0-rc.3 (with ng10 support)