Angular2 Injecting a service into Class error

Question

I am working on an Angular2 app and I am trying to inject a service into a class. I have searched all around and found that I need to use ReflectiveInjector class, but my issue is that I am still getting a no provider error for the FirebaseRef portion of that service.

I have been working on this a couple days and no where can I find a solution that solves my problem. One of the answer on here mentioned having to deal with declaring dependancies, but never gave an answer on how to do that. Any help would be appreciated. Thanks.

Stacktrace

EXCEPTION: Uncaught (in promise): Error: No provider for Token FirebaseApp! (ImageUploadService -> Token FirebaseApp)
Error: No provider for Token FirebaseApp! (ImageUploadService -> Token FirebaseApp)
at NoProviderError.BaseError [as constructor] (http://localhost:4200/main.bundle.js:6124:27)
at NoProviderError.AbstractProviderError [as constructor] (http://localhost:4200/main.bundle.js:59490:16)
at new NoProviderError (http://localhost:4200/main.bundle.js:59552:16)
at ReflectiveInjector_._throwOrNull (http://localhost:4200/main.bundle.js:82140:19)
at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/main.bundle.js:82179:25)
at ReflectiveInjector_._getByKey (http://localhost:4200/main.bundle.js:82126:25)
at ReflectiveInjector_._getByReflectiveDependency (http://localhost:4200/main.bundle.js:82109:21)
at ReflectiveInjector_._instantiate (http://localhost:4200/main.bundle.js:82001:36)
at ReflectiveInjector_._instantiateProvider (http://localhost:4200/main.bundle.js:81968:25)

image-upload-service

import { Injectable, Inject } from '@angular/core';

import { FirebaseRef } from 'angularfire2';

@Injectable()
export class ImageUploadService {

 constructor(@Inject(FirebaseRef) public fb) { }

  uploadFile(file: File): any {
  var storage = this.fb.storage().ref().child("image.png");


  return storage;
}

testService() {
  console.log("service injector worked!!");
}

}

FileUploader.ts

import { ReflectiveInjector, Inject } from '@angular/core';

import { ImageWrap } from './ImageWrap';
import { ImageUploadService } from '../../services/image-upload.service';
import { FirebaseRef, FIREBASE_PROVIDERS } from 'angularfire2';

export class FileUploader {
  private queue:Array<ImageWrap> = [];
  private uploadService:ImageUploadService;

  public constructor() {
    let injector = ReflectiveInjector.resolveAndCreate([
     {provide: ImageUploadService, useClass: ImageUploadService}
    ]);
    this.uploadService = injector.resolveAndInstantiate([ImageUploadService]);
  }

  public addToQueue(files:File[]) {
    for(let file of files) {
     let tempName = file.name.replace(/\s+/g, '-');
     this.queue.push(new ImageWrap(file, tempName));
    }
   for( let image of this.queue) {
     console.log("image name " + image.name);
   }
    // this.uploadService.testService();

  }

  public uploadFile(file:ImageWrap) {

  }
}

Answer 1

Adding a service to the component is old syntax . You no longer add a provider inside the component .

But you do need to add a decorator to the component and the provider to the correct place which is in app.module.ts

inside the component should look like this,

@Component({
        templateUrl: './path/to/file-uploader.component.html'
    })

export class FileUploader { ...

If you do not want to give that file it's own html file, then you can add the html directly in the template paramater . That would look like this,

  @Component({
             template: `
                    <h2> This goes in here. It is important to format this correctly having the ticks on the top and bottom line.</h2>
                    `
        })

    export class FileUploader { ...

Then you have to add the new service you created to the providers array . You can do this inside of app.module.ts

Example

// Import Service file

import { NameOfServiceExport } from './services/PATH/TO/SERVICE/SERVICE_NAME_HERE.service';

// Add the service to the providers array

@NgModule({
    declarations: [
        AppComponent,
        PublicComponent,
    ],
    imports: [
        BrowserModule,
    ],
    providers: [
        SERVICE_NAME_HERE,

    ],
    bootstrap: [AppComponent]
})
export class AppModule {

}

Answer 2

You are missing @Component decorator in "FileUploader.ts"

import { ReflectiveInjector, Inject } from '@angular/core';

import { ImageWrap } from './ImageWrap';
import { ImageUploadService } from '../../services/image-upload.service';
import { FirebaseRef, FIREBASE_PROVIDERS } from 'angularfire2';


@Component({
        selector: 'file-uploader',
        templateUrl: "your template here",
        styleUrls: "your css file here",
        providers: [FIREBASE_PROVIDERS] // <== you need to add firebase provider here.
    })

export class FileUploader {
  private queue:Array<ImageWrap> = [];
  private uploadService:ImageUploadService;

  public constructor() {
    let injector = ReflectiveInjector.resolveAndCreate([
     {provide: ImageUploadService, useClass: ImageUploadService}
    ]);
    this.uploadService = injector.resolveAndInstantiate([ImageUploadService]);
  }

  public addToQueue(files:File[]) {
    for(let file of files) {
     let tempName = file.name.replace(/\s+/g, '-');
     this.queue.push(new ImageWrap(file, tempName));
    }
   for( let image of this.queue) {
     console.log("image name " + image.name);
   }
    // this.uploadService.testService();

  }

  public uploadFile(file:ImageWrap) {

  }
}