AngularFire2中FirebaseListObservable导入错误及未使用导入修复方案

Hey there, let's work through these two AngularFire2 issues you're hitting—they're common with version changes, so easy fixes once you know what's up:

1. Fixing "FirebaseListObservable has no exported member" error #

Starting with AngularFire2 version 5.x, the old FirebaseListObservable (and FirebaseObjectObservable) were replaced with new, more consistent types: AngularFireList (for list references) and AngularFireObject (for single object references). Here's how to update your code:

• Replace your database import line to use AngularFireList instead of FirebaseListObservable:

  import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
  

• Update the type declaration of your items property:

  items: AngularFireList<any>;
  

2. Fixing "imported but not used" warning for firebase/app #

This warning pops up because you're importing the Firebase namespace but not actually using any of its APIs in this service. You have two straightforward options:

• Option 1: Remove the unused import (cleanest choice if you don't need Firebase core APIs here):
  Delete this line entirely:

  import * as firebase from 'firebase/app';
  

• Option 2: Keep it (if you plan to use Firebase features later)
  If you think you'll need Firebase core functionality (like auth providers, direct database references, etc.) in this service down the line, you can keep the import. To suppress the warning temporarily, you can add a dummy usage like:

  // Add this line anywhere in your service class
  const _firebase = firebase;
  

  Though the cleaner long-term fix is to only keep imports you actively use.

Modified Full Code #

Here's your service with both fixes applied:

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { AngularFireAuth } from 'angularfire2/auth';
import { AlertController } from 'ionic-angular';
import { Storage} from '@ionic/storage';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

@Injectable()
export class UserServiceProvider {
  items: AngularFireList<any>;
  // this will be used to find out if a user has been logged in then nav to another page
  success: boolean;

  constructor(
    private afAuth: AngularFireAuth, 
    public alertCtrl: AlertController, 
    private storage: Storage, 
    private fbDb: AngularFireDatabase
  ) {
    // This creates a reference to the users in the database
    this.items = fbDb.list('/users');
  }
}

内容的提问来源于stack exchange，提问作者Leshawn