CODEWITHSUNDEEP
javascriptangulartypescriptfirebasegoogle-cloud-firestore
Shadov
Shadov

Reputation: 33

Firebase Storage connecting to Angular app

I'd like to store images in my web app in Firebase storage. I have already installed firebase using npm (npm i firebase angularfire2). My app throws this error in console: 

Error: StaticInjectorError(AppModule)[LoginComponent -> AngularFireStorage]: 
  StaticInjectorError(Platform: core)[LoginComponent -> AngularFireStorage]: 
    NullInjectorError: No provider for AngularFireStorage!

Here is my 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],

Here is my environment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: xxxxxxxxxxxxx
    authDomain: xxxxxxxxxxxxx
    databaseURL: xxxxxxxxxxxxx
    projectId: xxxxxxxxxxxxx
    storageBucket: xxxxxxxxxxxxxx
    messagingSenderId: xxxxxxxxxxxxx
    appId: xxxxxxxxxxxxx
    measurementId: xxxxxxxxx
  }
}

And I'm trying to call some function in some component:

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);
        }
      });
  }

Does anyone know why my console says that i still have no provider?

Upvotes: 0

Views: 298

Answers (1)

Mr Khan
Mr Khan

Reputation: 2292

As the exepction suggests, you seem to be missing AngularFireStorageModule in your imports. when you use:

AngularFirestoreModule.enablePersistence()

All it does is simply persisting your calls hence it must be called before any other methods. After calling persist, You still have to import the module separately AngularFireStorageModule.

imports: [
    BrowserModule,
    FormsModule,
    AngularFireModule.initializeApp(fbConfig),
    AngularFirestoreModule.enablePersistence(),
    AngularFireStorageModule,
],

Hope it helps :)

Upvotes: 1

Related Questions