Angular2サービスをクラスエラーに注入する

Question

私はAngular2アプリを開発中で、クラスにサービスを注入しようとしています。私はすべての周りを検索し、ReflectiveInjectorクラスを使用する必要があることがわかりましたが、私の問題は、まだそのサービスのFirebaseRef部分のプロバイダエラーを取得していないということです。

私は数日で作業していますが、私の問題を解決するソリューションはどこにありますか。ここでの回答の1つは、依存関係の宣言に対処する必要があると言われていましたが、それをどうやって行うのかについての答えは決してありませんでした。どんな助けもありがとう。ありがとう。

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) 

画像アップロードサービス

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

あなたは "FileUploader.ts" に

を @Componentデコレータが欠落しています

Answer 2

serviceをコンポーネントに追加するのは古いsyntaxです。 プロバイダをのコンポーネントの内部に追加しなくなりました。

しかし、あなたはcomponentと次のようになりますapp.module.ts component内部

である正しい場所にproviderにdecoratorを追加する必要があります、

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

export class FileUploader { ... 

そのファイルに自分のファイルが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 { ... 

は、その後、あなたが providers arrayに作成した新しい serviceを追加する必要があり、このようになります。あなたは app.module.ts

例

//インポートサービスが

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

//プロバイダ配列

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

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

} 

にサービスを追加し、このファイルの内部を行うことができます