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

Question

我正在尝试使用 ng2-dnd可排序的容器。

以下是我的组件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>

当我在 Node 6.9.1 上运行它时，它工作得非常好

但是当我在 Node 10.10.0 上运行它时，它会在组件加载时出现以下错误。

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)

我尝试使用 ng2-dragula也代替了 ng2-dnd。但同样的结果。它在 Node 6.9.1 上运行良好，但在 Node 10.10.0 上运行失败并出现相同的错误。

使用 ts 代码更新

以下是我的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 { }

包含组件的 scheduling.module.ts

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

和组件文件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)
  }

}

Answer 1

在 compilerOptions 的 tsconfig.json 文件中添加以下代码解决了这个问题。

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