ng2-dnd : Error: StaticInjectorError(AppModule)[SortableComponent -> ElementRef]:

I am trying to trying to use ng2-dnd sortable container.

Following is my component html

<div class="row">
        <div class="col-sm-3">
            <div class="panel panel-success">
                <div class="panel-heading">Source List</div>
                    <div class="panel-body">
                        <ul class="list-group" dnd-sortable-container [sortableData]="sourceList">
                            <li *ngFor="let item of sourceList; let x = index" class="list-group-item"
                                dnd-sortable [sortableIndex]="x" [dragEnabled]="true"
                                [dragData]="item">{{item.name}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div dnd-droppable class="panel panel-info" (onDropSuccess)="dropSuccess($event)">
                    <div class="panel-heading">Destination List</div>
                    <div class="panel-body">
                        <ul class="list-group" dnd-sortable-container [sortableData]="destList">
                            <li *ngFor="let item of destList; let x = index" class="list-group-item"
                                dnd-sortable [sortableIndex]="x" [dragEnabled]="true"
                                [dragData]="item">{{x+1}} - {{item.name}}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

It works absolutely fine when I run it on node 6.9.1

But when I run it on node 10.10.0, it gives following error on component load.

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[SortableComponent -> ElementRef]: 
  StaticInjectorError(Platform: core)[SortableComponent -> ElementRef]: 
    NullInjectorError: No provider for ElementRef!
Error: StaticInjectorError(AppModule)[SortableComponent -> ElementRef]: 
  StaticInjectorError(Platform: core)[SortableComponent -> ElementRef]: 
    NullInjectorError: No provider for ElementRef!
    at _NullInjector.get (core.js:1003)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveNgModuleDep (core.js:10896)
    at NgModuleRef_.get (core.js:12129)
    at resolveDep (core.js:12619)
    at _NullInjector.get (core.js:1003)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveNgModuleDep (core.js:10896)
    at NgModuleRef_.get (core.js:12129)
    at resolveDep (core.js:12619)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

I tried to use ng2-dragula also in place of ng2-dnd. But same result. It runs fine on node 6.9.1 but fails on node 10.10.0 with same error.

UPDATING with ts code

Following is my app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    KeypadDialogComponent, CardboardDialogComponent, MessageDialogComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatTabsModule,
    FormsModule, ReactiveFormsModule,
    MatDialogModule, MatFormFieldModule, MatInputModule,
    SchedulingModule, AppRoutingModule, InterceptorModule,
    DndModule.forRoot()//, DragulaModule.forRoot()
  ],
  exports: [
    MatTabsModule
  ],
  providers: [DataService,
              SchedulingService,
              SchedulingFactoryService, RequesterService],
  bootstrap: [AppComponent],
  entryComponents: [KeypadDialogComponent, CardboardDialogComponent,  MessageDialogComponent]
})
export class AppModule { }

The scheduleing.module.ts that contains the component

@NgModule({
  imports: [
    CommonModule,
    MaterialModule,
    FormsModule, ReactiveFormsModule,
    DndModule//, DragulaModule
  ],
  declarations: [SchedulingComponent, TeamComponent],
  exports: [SchedulingComponent,
            MaterialModule,// DndModule,
            FormsModule, ReactiveFormsModule]
})

and the component file team.component.ts

@Component({
  selector: 'app-team',
  templateUrl: './team.component.html',
  styleUrls: ['./team.component.scss']
})
export class TeamComponent implements OnInit {

  sourceList: ['Player1', 'Player2',' Player3'];

  destList: ['Player4', 'Player5', 'Player6'];

  constructor(private router: Router, private schedulingService: SchedulingService,
    private route: ActivatedRoute, private teamFactory: TeamFactoryService,
    private requester: RequesterService, private dragulaService: DragulaService) { }

  ngOnInit() {

  }


  dropSuccess($event: any) {
      console.log($event)
      console.log(this.sourceList)
      console.log(this.destList)
  }

}

Adding the following code in the tsconfig.json file in compilerOptions resolved the issue.

"paths": {
      "@angular/*": ["node_modules/@angular/*"]
    }