Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/33.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Firebase存储连接到Angular应用程序_Javascript_Angular_Typescript_Firebase_Google Cloud Firestore - Fatal编程技术网

Javascript Firebase存储连接到Angular应用程序

Javascript Firebase存储连接到Angular应用程序,javascript,angular,typescript,firebase,google-cloud-firestore,Javascript,Angular,Typescript,Firebase,Google Cloud Firestore,我想在Firebase存储中的web应用程序中存储图像。我已经使用npm安装了firebase(npm I firebase angularfire2)。我的应用在控制台中抛出此错误: Error: StaticInjectorError(AppModule)[LoginComponent -> AngularFireStorage]: StaticInjectorError(Platform: core)[LoginComponent -> AngularFireStorag

我想在Firebase存储中的web应用程序中存储图像。我已经使用npm安装了firebase(npm I firebase angularfire2)。我的应用在控制台中抛出此错误:

Error: StaticInjectorError(AppModule)[LoginComponent -> AngularFireStorage]: 
  StaticInjectorError(Platform: core)[LoginComponent -> AngularFireStorage]: 
    NullInjectorError: No provider for AngularFireStorage!
这是我的app.module.ts

import { environment } from '../environments/environment';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';

  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule.enablePersistence(),
    ....],
  providers: [AngularFireModule],
这是我的环境

export const environment = {
  production: false,
  firebase: {
    apiKey: xxxxxxxxxxxxx
    authDomain: xxxxxxxxxxxxx
    databaseURL: xxxxxxxxxxxxx
    projectId: xxxxxxxxxxxxx
    storageBucket: xxxxxxxxxxxxxx
    messagingSenderId: xxxxxxxxxxxxx
    appId: xxxxxxxxxxxxx
    measurementId: xxxxxxxxx
  }
}
我试图调用某个组件中的某个函数:

onFileSelected(event) {
    var n = Date.now();
    const file = event.target.files[0];
    const filePath = `RoomsImages/${n}`;
    const fileRef = this.storage.ref(filePath);
    const task = this.storage.upload(`RoomsImages/${n}`, file);
    task.snapshotChanges().pipe(
        finalize(() => {
          this.downloadURL = fileRef.getDownloadURL();
          this.downloadURL.subscribe(url => {
            if (url) {
              this.fb = url;
            }
            console.log(this.fb);
          });
        })
      )
      .subscribe(url => {
        if (url) {
          console.log(url);
        }
      });
  }

有人知道为什么我的控制台说我仍然没有提供程序吗?

正如示例所示,您的导入中似乎缺少
AngularFireStorageModule
。使用时:

AngularFirestoreModule.enablePersistence()

它所做的只是持久化您的调用,因此它必须在任何其他方法之前被调用。调用persist后,仍然需要单独导入模块
AngularFireStorageModule

imports: [
    BrowserModule,
    FormsModule,
    AngularFireModule.initializeApp(fbConfig),
    AngularFirestoreModule.enablePersistence(),
    AngularFireStorageModule,
],
希望有帮助:)