Angular2将服务注入类错误

Question

我正在使用Angular2应用，并且正在尝试将服务注入类。 我到处搜索，发现需要使用ReflectiveInjector类，但是我的问题是，该服务的FirebaseRef部分仍然没有提供程序错误。

我已经为此工作了几天，在哪里找不到解决我问题的解决方案。 此处的答案之一提到必须处理声明依赖关系，但从未给出如何做到这一点的答案。 任何帮助，将不胜感激。 谢谢。

堆栈跟踪

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)

图像上传服务

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

向组件添加service是旧syntax 。 您不再在组件内部添加提供程序 。

但你确实需要一个添加decorator的component和provider ，以正确的位置是在app.module.ts

component内部应该看起来像这样，

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

export class FileUploader { ...

如果您不想给该文件本身的html文件，则可以将html直接添加到template paramater 。 看起来像这样，

  @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 { ...

然后，您必须将创建的新service添加到providers array 。 您可以在app.module.ts中执行此操作

例

//导入服务文件

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

//将服务添加到provider数组

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

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

}

Answer 2

您在“ FileUploader.ts”中缺少@Component装饰器

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) {

  }
}