angulardart firestore throw error “firebase.firestore is not a function”

Question

Sorry, newbie question here. Here is my firebase_service.dart

import 'package:firebase/firebase.dart' as fb;
import 'package:firebase/firestore.dart' as fs;
import 'dart:async';
import 'package:angular/angular.dart';

@Injectable()
class FirebaseService {
  fb.User user;
  fs.DocumentReference reference;

  FirebaseService() {
    fb.initializeApp(
        apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        authDomain: "xxxxxx.firebaseapp.com",
        databaseURL: "https://xxxxxx.firebaseio.com",
        projectId: "xxxxxxx",
        storageBucket: "xxxxxxxxxxxx.appspot.com",
        messagingSenderId: "xxxxxxxxxx"
    );

    fb.auth().onAuthStateChanged.listen(_authChanged);
  }

    void _authChanged(fb.User event) => user = event;

  Future signIn() async {
    try {
      await fb.auth().signInWithPopup(new fb.GoogleAuthProvider());
    }
    catch (e) {
      print("$runtimeType::login() -- $e");
    }
  }

  void signOut() => fb.auth().signOut();

  Future submitName(id, name) async {
    reference = fb.firestore().doc('userdata/$id');
    try {
        await reference.set(id(name));
      } catch (e) {
        print('error submitting: $e');
      }
  }
}

I am trying to submit user name and user id to firestore by calling

fbService.submitName(id, name);

but I got this error

error submitting: NoSuchMethodError: method not found: 'call$1' (id.call$1 is not a function)

I don't know whats wrong with my code. I have tried looking for some angulardart firestore tutorial but got no luck. I am using dart-sdk 1.24.3, angular 4.0.0+2 and firebase 4.4.0

I have tried using this based on pub website

<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>

and this

<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-firestore.js"></script>

but still got the same error

Answer 1

Looks like you are missing one or both of the following script tags in index.html

<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-firestore.js"></script>

The Dart Firebase package is just a wrapper over the JS implementation and therefore this needs to be loaded before it can be used from Dart.