【问题标题】：Ionic can't find firebase离子找不到火力基地
【发布时间】：2018-03-27 08:19:15
【问题描述】：

我已经使用 Ionic 启动了一个示例应用程序，并开始集成 Firebase Auth。目前，我的应用程序包含一个显示登录/密码表单的页面。集成似乎工作正常，我可以检查用户是否经过身份验证并检索用户配置文件。但是，我的问题是，经过一些测试，可能在 10 分钟后，或者通常在另一个 ionic serve 之后，返回以下内容：

Typescript Error
Cannot find name 'firebase'.
src/app/app.component.ts
firebase.auth().signInWithEmailAndPassword(this.form.value.email,  this.form.value.password).catch(function(error) {

接下来的一个小时左右可能会恢复正常。或者在完全重启后。

index.html：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

  <script src="https://www.gstatic.com/firebasejs/4.5.1/firebase.js"></script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: "AIzaSyBiCVLhPuyfLV6qXI01IeTR_fcDs-dJoBY",
      authDomain: "racer-c6f75.firebaseapp.com",
      databaseURL: "https://racer-c6f75.firebaseio.com",
      projectId: "racer-c6f75",
      storageBucket: "racer-c6f75.appspot.com",
      messagingSenderId: "1070195339797"
    };
    firebase.initializeApp(config);
  </script>

</body>
</html>

app.component.ts ：

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { FormBuilder, FormGroup } from '@angular/forms';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})

export class MyApp {
  rootPage:any = HomePage;
  form : FormGroup;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      email: [''],
      password: ['']
    });

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

  signInWithEmail(){
    console.log("XXXXX");
    console.dir(this.form.value);
    firebase.auth().signInWithEmailAndPassword(this.form.value.email,  this.form.value.password).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      console.log(errorCode);
      console.log(errorMessage);

      // ...
    });
    console.log("YYY");
    var user = firebase.auth().currentUser;

    if (user) {
      // User is signed in.
      console.dir(user);
    } else {
      // No user is signed in.
    }
  }
}

app.module.ts ：

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

有什么想法吗？我用 AngularFire 尝试过类似的结果。

【问题讨论】：

标签： angular typescript ionic-framework firebase-authentication

【解决方案1】：

Typescript 错误：找不到名称“firebase”。

修补程序

创建globals.d.ts并添加declare var firebase:any

更好的修复

不要在 script 中包含 firebase，并使用带有 typescript 定义的 npm 模块。更多：https://firebase.google.com/support/guides/firebase-web

npm install firebase

【讨论】：

更好的修复做到了。您能否解释一下什么是打字稿定义以及为什么需要它们（而不是在 js 库文件中提供）？声明 var firebase:any 到底是什么意思？

【解决方案2】：

//first, download firebase with "npm install --save firebase"

// in app.components.ts
`Import firebase from 'firebase/app';`


// initialize your app with firebase details in app.modules.ts

`var app = firebase.initializeApp({
apiKey: '<your-api-key>',
authDomain: '<your-auth-domain>',
databaseURL: '<your-database-url>',
storageBucket: '<your-storage-bucket>',
messagingSenderId: '<your-sender-id>'
});`

【讨论】：