Uploading a file with Angular2
I currently have a lot of problems when it comes to this. I tried to use ng2-file-upload , but it turns out that it is giving me an error that I don't understand.
Mistake
ERROR Error: Uncaught (in promise): Error: No component factory found for TaskComponent. Did you add it to @NgModule.entryComponents?
noComponentFactoryError@http://localhost:4200/vendor.bundle.js:3565:34 [angular]
He gave me an error No component factory found for TaskComponent
. This only happens when I have @Directive
inside my component.
Edited TaskComponent.ts
import { Directive, Component, OnInit, OnDestroy, ViewChild, EventEmitter } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Http, Response, Headers } from '@angular/http';
import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
import { ModalDirective } from 'ng2-bootstrap/modal/modal.component';
import { ApiService } from '../../assets/services/api.service';
import { UploadOutput, UploadInput, UploadFile, humanizeBytes } from 'ngx-uploader';
// class FileSelectDirective
@Directive({ selector: '[ng2FileSelect]' })
@Component({
selector: 'app-task',
templateUrl: './task.component.html',
styleUrls: ['./task.component.scss']
})
export class TaskComponent implements OnInit {
ngOnInit(){}
}
I also imported this into my module.
RtoModule.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { ModalModule } from 'ng2-bootstrap/modal';
import { FileUploadModule } from 'ng2-file-upload';
import { TaskComponent } from '../task/task.component';
import { TaskDetailsComponent } from '../task-details/task-details.component';
import { RtoRoutingModule } from '../rto-routing/rto-routing.module';
@NgModule({
imports: [
CommonModule,
RtoRoutingModule,
FormsModule,
ReactiveFormsModule,
FileUploadModule,
ModalModule.forRoot()
],
declarations: [
TaskComponent,
TaskDetailsComponent
]
})
export class RtoModule { }
Can someone point me to where I did wrong? Wherever in implementation or not.
Thank you in advance!
PS: I'm currently using the Angular4 version in this project
source to share
It seems that I was wrong when implementing this module.
Somehow it works now, no errors on my component. I am implementing these codes on my component
public uploader:FileUploader = new FileUploader({url: URL});
public hasBaseDropZoneOver:boolean = false;
public hasAnotherDropZoneOver:boolean = false;
It now works correctly. They are currently developing a backend.
Thanks to everyone who answered my question!
source to share