4/18/2016 - 1:09 PM

Ionic 2 Beta + Parse Server Javascript SDK

Ionic 2 Beta + Parse Server Javascript SDK

Integrate Parse Javascript SDK with Ionic 2 Beta

1 Install dependencies

  • npm install parse --save
  • tsd install parse --save // if you use Typescript

2 Modify the 'scripts' task in gulpfile.js to this:


gulp.task('scripts', function(){
  return copyScripts(
   { src: [

This ensures the parse-latest.min.js will be copied along with angular2-polyfills from your node_modules to the Ionic build folder.

3 Add the import to your index.html above cordova.js



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

  <!-- Parse SDK -->
  <script src="build/js/parse-latest.min.js"></script>
    Parse.serverURL = '';

  <!-- Google Maps -->
  <script src=""></script>

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <!-- Zone.js and Reflect-metadata  -->
  <script src="build/js/angular2-polyfills.js"></script>
  <!-- the bundle which is built from the app's source code -->
  <script src="build/js/app.bundle.js"></script>

4 Initialize Parse when platform ready


initializeApp() {
    this.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.
      Parse.serverURL = '';

You will need to add the following line in every file, where you will be using Parse SDK above the @App and @Component annotations, if you are using Typescript.


import 'es6-shim';
import {App, IonicApp, Platform, MenuController} from 'ionic-angular';
import {StatusBar} from 'ionic-native';

declare var Parse: any;


5 Use the Parse SDK in your components

register(email: string, password: string, birthday?: any) {
    console.log('registering ' + email);
    var user = new Parse.User();
    user.set("username", email);
    user.set("email", email);
    user.set("password", password);

    // other fields can be set just like with Parse.Object
    user.set("birthday", birthday);

    user.signUp(null, {
      success: function (user) {
      error: function (user, error) {
        // Show the error message somewhere and let the user try again.
        alert("Error: " + error.code + " " + error.message);