Firebase 在 AngularDart 项目中引发错误答案

【问题标题】：Firebase throws error in an AngularDart projectFirebase 在 AngularDart 项目中引发错误
【发布时间】：2018-02-13 16:07:23
【问题描述】：

在哪里可以找到 AngularDart 项目的 Firebase (.firebaserc) 文件。

Firebase 在项目连接时写入以下文件。

Writing configuration info to firebase.json...
Writing project information to .firebaserc...

firebase 错误

(anonymous function)    Uncaught Unhandled exception:
EXCEPTION: Error in 
package:my_app/views/app_component/app_component.html:0:0
ORIGINAL EXCEPTION: NoSuchMethodError: Class 'String' has no instance method 
'_hasProperty'.
Receiver: "[DEFAULT]: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app)."
Tried calling: _hasProperty("message")

它包含初始化 firebase 的代码。 firebase_service.dart

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

@Injectable()
class FirebaseService {
  fb.User user;
  fb.Auth _fbAuth;
  fb.GoogleAuthProvider _fbGoogleAuthProvider;

  FirebaseService() {
    fb.initializeApp(
        apiKey: "AIzaSyBOShlCgUeqTL99n32bjWdNlkH1111111",
        authDomain: "my-app.firebaseapp.com",
        databaseURL: "https://my-app.firebaseio.com",
        storageBucket: "my-app.appspot.com",
    );

    _fbGoogleAuthProvider = new fb.GoogleAuthProvider();
    _fbAuth = fb.auth();
    _fbAuth.onAuthStateChanged.listen(_authChanged);
  }

  void _authChanged(fb.User event) {
    user = event;
  }

  Future signIn() async {
    try {
      await _fbAuth.signInWithPopup(_fbGoogleAuthProvider);
    }
    catch (error) {
      print("$runtimeType::login() -- $error");
    }
  }

  void signOut() {
    _fbAuth.signOut();
  }
}

【问题讨论】：

错误消息似乎表明您正在多次初始化 firebase。你在哪里有初始化 firebase 的代码？
包含有问题的初始化代码。
您在哪里将FirebaseService 添加到providers: [...]？它应该是 only bootstrap(AppComponent, [...] 或 alternally only 在 @Component(..., providers: const [...]) class AppComponent {}` 中，但没有其他地方.
是的，我发现我已将 FirebaseService 添加到两个提供程序：[...] dart 文件

标签： firebase dart firebase-authentication angular-dart

【解决方案1】：

如果您的服务中的代码应该只实例化一次，请确保您只提供该服务一次。

仅在

中提供此类服务

bootstrap(AppComponent, [...])

或仅在

中

@Component(
  ..., 
  providers: const [...])
}
class AppComponent {}

【讨论】：