Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

ionic2中使用Firebase与Angularfire

Posted on 2017年9月2日2017年9月2日 by king2088

为了把一个老项目中的Firebase以及Angularfire进行升级,并且升级ionic项目,由此入了很多很多的坑,首先使用老项目不论怎么调试怎么重新运行npm install,ionic serve启动项目总是失败而告终,最终无法仍受了,重新直接使用新版的ionic2版本与新版的Firebase与Angularfire2重新重构一次项目。由此遇到了很多升级过程中的坑。
1、升级了Firebase后,出现了找不到AngularFire和FirebaseListObservable的解决办法
由于更新到了最新版的Firebase,而firebase库已经进行了一些调整,导致了找不到AngularFire和FirebaseListObservable,在新版的firebase库中,已经将这两个方法重新封装到了database里面了,并且摒弃了AngularFire,重新使用AngularFireDatabase,因此我们需要这样来调用:
[cc lang=”javascript”]import {AngularFireDatabase, FirebaseListObservable} from ‘angularfire2/database’;
constructor(private af: AngularFireDatabase){this.af.list()}[/cc]
2、打包之后遇到了这样的问题:Client doesn’t have permission to access the desired data.

遇到这个问题是很正常的,因为我们总是习惯使用旧版本的方式去导入firebase库,因此就会导致很多错误,这个原因是因为我们在app.module.ts中未引入正确的firebase或者angularfire2/database.我们只需要在app.module.ts中引入如下的firebase即可:
[cc lang=”javascript”]import { AngularFireDatabaseModule } from ‘angularfire2/database’;
imports: [
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule
][/cc]
AngularFireDatabaseModule必须放在AngularFireModule.initializeApp的后面,不然可能又会出现其他错误了!
这样一来就搭建成功了。
不过不知道为什么,我使用ionic serve的方式在浏览器查看效果,总是提示我firebase编译后的代码中有语法错误,导致我在浏览器中是无法看到任何效果的。最终我选择直接在ios模拟器中运行,这样的方式真可笑,在ios中运行一切顺利,因此就没有必要去关系浏览器中出现语法错误的问题了!

发表评论 取消回复

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

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 4月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme