Angular: Can't bind to 'uploader' but FileUploadModule is imported in same module

Question

I've got a strange problem while using the [uploader] file drop directive from ng2-file-upload. The Angular complier output is:

Can't bind to 'uploader' since it isn't a known property of 'div'.

I searched for any similar Problems on this site, but from my perspective, everything is correct:

Declare Component in app.module - check
Import FileUploaderModule in the same app.module - check
no other modules (besides routing)

the app.module:

[...]
import { SongFilesComponent } from './components/songs/song-files/song-files.component';
import { FileUploadModule } from 'ng2-file-upload';

@NgModule({
  declarations: [
    [...]
    SongFilesComponent
  ],
  imports: [
    [...]
    FileUploadModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

SongFilesComponent:

[...]
<div
  [uploader]="newFileUploader"
  (fileOver)="onFileOverNew($event)"
  [class.file-over]="fileOverNew"
>
  Drop file here
</div>
[...]

But I always get the described error. I have a second simple test project and the the uploader works. But I can't find any difference between them two.

The whole project is hosted on https://github.com/smuddy/wgenerator/tree/master/WEB

replace `
`by the real name of your component
– Jscti Mar 27 '19 at 15:20 — Jscti, Mar 27 '19 at 15:20
ok sorry, I added the SongFilesComponent in the question – Benjamin Ifland Mar 27 '19 at 15:21 — Benjamin Ifland, Mar 27 '19 at 15:21

score 2 · Accepted Answer · answered Mar 27 '19 at 15:26

You're missing the component selector that you're trying to use (DIV element is not an angular component, and has not any uploader Input).

You need to replace :

[...]
<div
  [uploader]="newFileUploader"
  (fileOver)="onFileOverNew($event)"
  [class.file-over]="fileOverNew"
>
  Drop file here
</div>
[...]

by

[...]
<div ng2FileDrop
  [uploader]="newFileUploader"
  (fileOver)="onFileOverNew($event)"
  [class.file-over]="fileOverNew"
>
  Drop file here
</div>
[...]

Angular: Can't bind to 'uploader' but FileUploadModule is imported in same module

1 Answers1