ERROR Error: inject() must be called from an injection context

[yuchuan1]

I tried to follow the document.
However when I got to "Making a DOM element draggable" (https://cormacrelf.github.io/angular-skyhook/additional-documentation/guide/2.-connecting-to-dom.html), I encountered an error message "ERROR Error: inject() must be called from an injection context" in console.

inject SkyhookDndService works, if I comment out

<div [dragSource]="source">
  drag me
</div>

source = this.dnd.dragSource("DRAGME", {
  beginDrag: () => ({ name: 'Jones McFly' }),
  // other DragSourceSpec methods
});

I am using nx monorepo and import the component from a library module.
Angular version 12
In the main app, my imports is
SkyhookDndModule.forRoot({ backend: HTML5Backend })
,in my lib module, the imports is
imports: [CommonModule, SkyhookDndModule],
as stated in https://cormacrelf.github.io/angular-skyhook/additional-documentation/quickstart.html