0

I'm trying to modularize an application. I followed these instructions: https://angular.io/guide/feature-modules

When trying to import the draganddrop module in a component under the feature module, i'm getting the following error:

Can't bind to 'cdkDropListData' since it isn't a known property of 'div'. ("
    class="container"
    cdkDropList
    [ERROR ->][cdkDropListData]="data"
    (cdkDropListDropped)="drop($event, i)"
  >

What I did: 1. Added FeatureModule in app.module.ts imports 2. Added DragDropModule in import and export in feature.module.ts

Can anyone advise me on what I'm doing wrong please?

@NgModule({
 imports: [CommonModule, FontAwesomeModule, DragDropModule],
 declarations: [DashboardComponent],
 exports: [DragDropModule]
 })
 export class FeatureModule {}

package.json

{ "name": "angular-app", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~9.1.9", "@angular/cdk": "^9.2.4", "@angular/common": "~9.1.9", "@angular/compiler": "~9.1.9", "@angular/core": "~9.1.9", "@angular/forms": "~9.1.9", "@angular/platform-browser": "~9.1.9", "@angular/platform-browser-dynamic": "~9.1.9", "@angular/router": "~9.1.9", "@auth0/angular-jwt": "^4.2.0", "@fortawesome/angular-fontawesome": "^0.6.0", "@fortawesome/fontawesome-svg-core": "^1.2.27", "@fortawesome/free-solid-svg-icons": "^5.12.1", "@ngrx/store": "^9.2.0", "angular-font-awesome": "^3.1.2", "bootstrap": "^4.5.0", "jquery": "^3.5.1", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.901.7", "@angular/cli": "~9.1.7", "@angular/compiler-cli": "~9.1.9", "@types/node": "^12.11.1", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", "codelyzer": "^5.1.2", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~5.0.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~2.1.0", "karma-jasmine": "~3.0.1", "karma-jasmine-html-reporter": "^1.4.2", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~3.8.3" } }

Aeonify
  • 63
  • 1
  • 8
  • By "under the feature module", you mean that your component is declared in the feature module? – julianobrasil Jun 18 '20 at 18:53
  • yes, I have the dashboard component declared in the feature module. I just updated my question and added the code in the feature module – Aeonify Jun 18 '20 at 18:57
  • That's weird.... could you post your `package.json`? – julianobrasil Jun 18 '20 at 19:00
  • I added the package.json. In the app.module.ts, I added the feature module in imports – Aeonify Jun 18 '20 at 19:11
  • I see nothing wrong with your package.json... if it's not a brand new project, try to remove `node_modules`, `package-lock.json` and `npm install` it again. – julianobrasil Jun 18 '20 at 19:13
  • ok, i'll try this and update you. thank you Just a quick question, for example when using a module such as dragDropModule in a feature module, we just need to import the dragdrop module in the feature module to be able to use it in the feature module components? – Aeonify Jun 18 '20 at 19:17
  • Yes. In some cases, the module demands configurations, but usually, you just have to import the module in the module you're planning to use its features. That's the case do `CdkDragDropModule`. – julianobrasil Jun 18 '20 at 19:19

0 Answers0