[英]Ionic2+Firebase app compile error: TypeScript error:Error TS2503: Cannot find namespace 'firebase'
I am new to Ionic2 and using firebase for the first time. 我是Ionic2的新手,并且是第一次使用Firebase。 While trying a sample login app using the above two I got a compile error as
在尝试使用以上两个示例登录应用程序时,出现编译错误
TypeScript error: TypeScript错误:
TypeScript error: /ionic/devdactic-firebase22/node_modules/angularfire2/database/database.d.ts(9,29): Error TS2503: Cannot find namespace 'firebase'.
TypeScript错误:/ionic/devdactic-firebase22/node_modules/angularfire2/database/database.d.ts(9,29):错误TS2503:找不到命名空间“ firebase”。 TypeScript error: /ionic/devdactic-firebase22/node_modules/angularfire2/database/database.d.ts(10,31): Error TS2503: Cannot find namespace 'firebase'.
TypeScript错误:/ionic/devdactic-firebase22/node_modules/angularfire2/database/database.d.ts(10,31):错误TS2503:找不到命名空间“ firebase”。 TypeScript error: /ionic/devdactic-firebase22/node_modules/angularfire2/providers/auth.d.ts(15,40): Error TS2503: Cannot find namespace 'firebase'.
TypeScript错误:/ionic/devdactic-firebase22/node_modules/angularfire2/providers/auth.d.ts(15,40):错误TS2503:找不到命名空间“ firebase”。 TypeScript error: /ionic/devdactic-firebase22/node_modules/angularfire2/providers/auth.d.ts(16,52): Error TS2503: Cannot find namespace 'firebase'.
TypeScript错误:/ionic/devdactic-firebase22/node_modules/angularfire2/providers/auth.d.ts(16,52):错误TS2503:找不到命名空间“ firebase”。 TypeScript error:/ionic/devdactic-firebase22/node_modules/angularfire2/providers/auth.d.ts(16,92): Error TS2503: Cannot find namespace 'firebase'.
TypeScript错误:/ionic/devdactic-firebase22/node_modules/angularfire2/providers/auth.d.ts(16,92):错误TS2503:找不到命名空间“ firebase”。
I have tried with install guide for AngularFire : https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md . 我已经尝试过AngularFire的安装指南: https : //github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md 。
Also tried to import firebase in my app.ts as 还尝试在我的app.ts中将firebase导入为
import * as firebase from 'firebase';
从“ firebase”导入*作为firebase;
still couldn't find any solution. 仍然找不到任何解决方案。 What could be the reason and how can I solve it?
可能是什么原因,我该如何解决?
I am using angularfire2@^2.0.0-beta.2 and firebase@^2.4.2. 我正在使用angularfire2@^2.0.0-beta.2和firebase@^2.4.2。
app.ts 应用程序
import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {LoginPage} from './pages/login/login';
import * as firebase from 'firebase';
import {FIREBASE_PROVIDERS,
defaultFirebase,
AngularFire,
AuthMethods,
AuthProviders,
firebaseAuthConfig} from 'angularfire2';
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>',
providers: [
FIREBASE_PROVIDERS,
// defaultFirebase('https://loginapp-a08a6.firebaseio.com/'),
firebaseAuthConfig({
provider: AuthProviders.Password,
method: AuthMethods.Password
})
]
})
export class MyApp {
rootPage: any = LoginPage;
constructor(platform: Platform) {
platform.ready().then(() => {
StatusBar.styleDefault();
});
var config = {
apiKey: "AIzaSyBU2Vqq7AjN4rlMWjyKBbXo2RVJXAR4TeM",
authDomain: "loginapp-a08a6.firebaseapp.com",
databaseURL: "https://loginapp-a08a6.firebaseio.com",
storageBucket: "loginapp-a08a6.appspot.com",
};
firebase.initializeApp(config);
}
}
ionicBootstrap(MyApp);
login.ts: login.ts:
import {Component} from '@angular/core';
import {NavController, AlertController, LoadingController} from 'ionic-angular';
import {FirebaseAuth} from 'angularfire2';
import {HomePage} from '../home/home';
@Component({
templateUrl: 'build/pages/login/login.html',
})
export class LoginPage {
// public loading: Loading;
constructor(public nav: NavController,
public auth: FirebaseAuth,
private alertCtrl:AlertController,
private loadingCtrl:LoadingController) {}
public registerUser(credentials) {
this.showLoading()
this.auth.createUser(credentials).then((authData) => {
let prompt = this.alertCtrl.create({
title: 'Success',
subTitle: 'Your new Account was created!',
buttons: ['OK']
});
prompt.present();
}).catch((error) => {
this.showError(error);
});
}
public login(credentials) {
this.showLoading()
this.auth.login(credentials).then((authData) => {
this.nav.setRoot(HomePage);
}).catch((error) => {
this.showError(error);
});
}
showLoading() {
var loader = this.loadingCtrl.create({
content: 'Please wait...',
duration:3000
});
loader.present();
}
showError(text) {
let alert = this.alertCtrl.create({
title: 'Fail',
subTitle: text,
buttons: ['OK']
});
alert.present();
}
}
In tsconfig under compilerSettings , add the property "types" and specify "firebase" as a type: 在compilerSettings下tsconfig,添加属性“类型”,并指定“火力点”的类型:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"types": [
"firebase"
]
},
"exclude": [
"node_modules"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
There are varying set of answers that work for this kind of problem. 对于这类问题,有各种各样的答案。 The one that worked for me was:
对我有用的是:
You reference the Firebase 3 typings file that is included in the angularfire2 node package directly in your typings.json. 您可以直接在Types.json中引用angularfire2节点程序包中包含的Firebase 3类型文件。 Run:
跑:
typings install file:node_modules/angularfire2/firebase3.d.ts --save --global
typings install
This will put the typings files in the typings/
directory. 这会将打字文件放到
typings/
目录中。
For other solutions, check out this issue on GitHub https://github.com/angular/angularfire2/issues/234 对于其他解决方案,请在GitHub https://github.com/angular/angularfire2/issues/234上查看此问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.