Trying to pass a value from a service to a component in Angula2. Getting: "Unhandled Promise rejection: Can't resolve all parameters."

Question

I am trying to pass a specific value from a service to my component. But, I am getting this error in my console:

Unhandled Promise rejection: Can't resolve all parameters for Help: (?). ; Zone: ; Task: Promise.then ; Value: Error: Can't resolve all parameters for Help: (?). at CompileMetadataResolver._getDependenciesMetadata

Here is what I have in my service:

export class Help{

    good: number;

    constructor (private _uploadedFile: UploadedFile){}

    getGood(){
        this.good = this._uploadedFile.status;
        return this.good;
    }

}

Here is my component:

@Component({
    templateUrl: 'ocr/templates/image-upload.html',
    providers: [Help]

})


export class OCRComponent {

    statusFromServer: number;

    constructor(private router: Router, @Inject(Help) private _help: Help){}

    options: Object = {
        url: 'http://10.10.10.15:8081/upload'
    };
    sizeLimit = 2000000;

    handleUpload(): void {

        this.statusFromServer = this._help.getGood();
        console.log('this.statusFromServer');

            }

    beforeUpload(uploadingFile): void {
        if (uploadingFile.size > this.sizeLimit) {
            uploadingFile.setAbort();
            alert('File is too large');
        }
    }

}

Here is the UploadedFile class from the service:

@Injectable()
export class UploadedFile {
    id: string;
    public status: number;
    statusText: string;
    progress: Object;
    originalName: string;
    size: number;
    response: string;
    done: boolean;
    error: boolean;
    abort: boolean;
    startTime: number;
    endTime: number;
    speedAverage: number;
    speedAverageHumanized: string;

    constructor(id: string, originalName: string, size: number) {
        this.id = id;
        this.originalName = originalName;
        this.size = size;
        this.progress = {
            loaded: 0,
            total: 0,
            percent: 0,
            speed: 0,
            speedHumanized: null
        };
        this.done = false;
        this.error = false;
        this.abort = false;
        this.startTime = new Date().getTime();
        this.endTime = 0;
        this.speedAverage = 0;
        this.speedAverageHumanized = null;
    }

    setProgres(progress: Object): void {
        this.progress = progress;
    }

    setError(): void {
        this.error = true;
        this.done = true;
    }

    setAbort(): void {
        this.abort = true;
        this.done = true;
    }

    onFinished(status: number, statusText: string, response: string): void {
        this.endTime = new Date().getTime();
        this.speedAverage = this.size / (this.endTime - this.startTime) * 1000;
        this.speedAverage = parseInt(<any>this.speedAverage, 10);
        this.speedAverageHumanized = humanizeBytes(this.speedAverage);
        this.status = status;
        this.statusText = statusText;
        this.response = response;
        this.done = true;
        // console.log(status);
        // console.log(response.toString());

    }


}

What is wrong with my dependency injection?

Answer 1

This seems to be an issue with your UploadFile service, add it as a provider on your component or if you want add it as a provider of your module.

If you add the UploadFile service to your module, that service will be the same instance in every place that you inject it.

Otherwise if you add the UploadFile service on your component that service will be a new instance so some value will be empty if you try to get some values from another component.

Remember to add the @Injectable() decorator when you want to make something injectable

For more information about DI go to https://angular.io/docs/ts/latest/guide/dependency-injection.html

@Component({
    templateUrl: 'ocr/templates/image-upload.html',
    providers: [Help, UploadFile]

})

export class OCRComponent {
   // Removed the content to focus only on the @Component decorator.
}

Edit:

After the post of the UploadFile, we saw that it is just a class and the problem was that angular cannot resolve that constructor.

Answer 2

@Injectable() // <<=
export class Help{

constructor(private router: Router, Help private _help: Help){}

This constructor won't work for injectables:

constructor(id: string, originalName: string, size: number) {

string can't be injected.

Either you use

    constructor(
      @Inject('someProviderKey1') id: string, 
      @Inject('someProviderKey2') originalName: string,            
      @Inject('someProviderKey3') size: number) {

where someProviderKeyX needs to be the key of a registered provider or remove the parameters

and Help and UploadFile need to be provided somewhere like explained by @camaron