ionic2中使用Firebase与Angularfire

为了把一个老项目中的Firebase以及Angularfire进行升级,并且升级ionic项目,由此入了很多很多的坑,首先使用老项目不论怎么调试怎么重新运行npm install,ionic serve启动项目总是失败而告终,最终无法仍受了,重新直接使用新版的ionic2版本与新版的Firebase与Angularfire2重新重构一次项目。由此遇到了很多升级过程中的坑。
1、升级了Firebase后,出现了找不到AngularFire和FirebaseListObservable的解决办法
由于更新到了最新版的Firebase,而firebase库已经进行了一些调整,导致了找不到AngularFire和FirebaseListObservable,在新版的firebase库中,已经将这两个方法重新封装到了database里面了,并且摒弃了AngularFire,重新使用AngularFireDatabase,因此我们需要这样来调用:

import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';
constructor(private af: AngularFireDatabase){this.af.list()}

2、打包之后遇到了这样的问题:Client doesn’t have permission to access the desired data.

遇到这个问题是很正常的,因为我们总是习惯使用旧版本的方式去导入firebase库,因此就会导致很多错误,这个原因是因为我们在app.module.ts中未引入正确的firebase或者angularfire2/database.我们只需要在app.module.ts中引入如下的firebase即可:

import { AngularFireDatabaseModule } from 'angularfire2/database';
imports: [
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule
]

AngularFireDatabaseModule必须放在AngularFireModule.initializeApp的后面,不然可能又会出现其他错误了!
这样一来就搭建成功了。
不过不知道为什么,我使用ionic serve的方式在浏览器查看效果,总是提示我firebase编译后的代码中有语法错误,导致我在浏览器中是无法看到任何效果的。最终我选择直接在ios模拟器中运行,这样的方式真可笑,在ios中运行一切顺利,因此就没有必要去关系浏览器中出现语法错误的问题了!

发表评论

电子邮件地址不会被公开。 必填项已用*标注