Ng2-file-upload: lazyload pages with file upload as a components

Ionic Framework ionic-v3
1

So from reading two threads here I understood what my problem was - but I was wondering - why this is the answer ?

I’ll start with the problem-solution, then I’ll ask the question
So my problem was:
Can't bind to 'uploader' since it isn't a known property of 'input' what make sense to me was importing it here:

  • app.module.ts ( import { FileUploadModule } from 'ng2-file-upload'; )
  • components.module.ts ( import { FileUploadModule } from 'ng2-file-upload'; )

The solution I found was:

  • Removing the import from components.module.ts
  • Adding it to the PAGE module (contact-person.module.ts)

That solved it for me, the question is WHY ?!
I thought the whole point of having components, is that they are stand-alone kind of tags that I can import it wherever I need, example:

# contact-person.html
<ion-content>
    <photo-upload></photo-upload>
</ion-content>

# photo.upload.html
# which doesn't have a photo.upload.module.ts but is exported in the global components.module.ts file 
# has:
<input 
        type="file" 
        id="fileupload"
        ng2FileSelect
        [style.display]="'none'"
        [uploader]="uploader"
        (change)="readUrl($event)" />

W/o the [uploader]="uploader" - the project is able to render, but with it - it doesn’t ( solution was above )

But WHY ?! I want my component to be independed, why I need to import the FileUploadModule in every page where I use the <photo-upload></photo-upload> tags, doesn’t make sense to me

Any thoughts ?