Updating to ng2-dragula 2.0 not working

Question

I've searched Google for this but none of the "solutions" I've found work, and are from 2016. I had it working fine with 1.x, but now I am trying to follow the migration guide to update to 2.0.

I have a setup like this in the HTML with two Bootstrap cards containing lists:

 <div class="row">
          <div class="col">
            <div class="card">
              <div class="card-header">Fruits</div>
              <div class="card-body">
                <ul [dragula]="firstbag"
                    [(dragulaModel)]="produce.fruits"
                    class="drag-container">
                  <li *ngFor="let item of produce.fruits"
                      class="drag-item">{{item.label}}</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card">
              <div class="card-header">Vegetables</div>
              <div class="card-body">
                <ul [dragula]="firstbag"
                    [(dragulaModel)]="produce.vegetables"
                    class="drag-container">
                  <li *ngFor="let item of produce.vegetables"
                      class="drag-item">{{item.label}}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

However, when I try and compile this I am getting:

ERROR in : Can't bind to 'dragula' since it isn't a known property of 'ul'. (" class="card-header">Fruits</div>
              <div class="card-body">
                <ul [ERROR ->][dragula]="firstbag"
                    [(dragulaModel)]="produce.fruits"
                  ")
: Can't bind to 'dragulaModel' since it isn't a known property of 'ul'. ("       <div class="card-body">
                <ul [dragula]="firstbag"
                    [ERROR ->][(dragulaModel)]="produce.fruits"
                    class="drag-container">
               ")

I have imported as describe in my app module:

import { DragulaModule } from 'ng2-dragula';
@NgModule({
  imports: [
  ...,
  DragulaModule.forRoot()
 ],
})

export class AppModule { }

The data for the lists is in my component:

produce = {
  fruits: [
    {
      id: 0,
      label: 'Squash'
    },
    {
      id: 1,
      label: 'Pineapples'
    },
    {
      id: 2,
      label: 'Raspberries'
    }
  ],
  vegetables: [
    {
      id: 3,
      label: 'Carrots'
    }
  ]
};

I have changed the syntax to [(dragulaModel)] in the html, as you can see above.

At this point, I'm lost.