0
Ionicを使ってサンプルアプリケーションを開始し、Firebase Authを統合し始めました。今のところ、私のアプリケーションには、ログイン/パスワードフォームを示す単一のページが含まれています。 統合が正常に機能しているようですが、ユーザーが認証されているかどうかを確認してユーザープロファイルを取得できます。しかし、ここに私の問題は、試験の少し後に、多分10分後に、または一般的に他のionic serve後、以下が返されることです。Ionicがfirebaseを見つけることができません
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 {}
何か案が ？私は同様の結果を得てAngleFireを試しました。
より良い修正はそれをやりました。タイスクリプトの定義とその理由（なぜ、jsライブラリファイルには含まれていないのですか）について説明してください。宣言しているvarのfirebaseとは何ですか？ – SCO