How to require('xyz') in ionic2/angular2?

Ionic Framework ionic-v3
#1

  1. I read that ionic 2 is moving away from bower from one of the posts here. So all third-party libraries will be installed using npm. Once I have it npm installed, I assume I have to change something in webpack.config.js to make sure the library is included and packed by webpack. Is my assumption correct? I’m new to webpack.

  2. Another question I have is that this Parse javascript sdk is using var Parse = require('parse') to load. How do I load that in ionic2/angular2, which has a different loading mechanism? I have searched a lot on this topic and I’m surprising I couldn’t find anything that seemed to address this issue. Perhaps I didn’t use proper search terms.

    $ npm install parse --save

Thanks.

#2

I’ll answer you your first question.

If everything is set correctly, you don’t need to change anything in webpack.config.js file.

For example, yesterday I wrote an article on how to use Ionic2 with a ng2-translate plugin.

Once you install it via:

npm install ng2-translate --save

Next step, just import it and that is that:

import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';

@App({
	template: '<ion-nav [root]="rootPage"></ion-nav>',
	config: {},
	providers: [TranslateService],
	pipes: [TranslatePipe]
})

Working example can be found here: http://www.gajotres.net/ionic-2-internationalize-and-localize-your-app-with-angular-2/

#3

@Gajotres, great article.

If the library is written for angular 2, I found it pretty to easy to install and I usually don’t have to mess with anything in webpack.config.js. However, when the library uses a different loading mechanism, i.e., Parse sdk uses require(), that’s where I got stuck.

#4

If somehow managed to use parse in my ionic2 project (not sure wether this is the best way to do this):
Note: I’m using the TS version of ionic2.

1) Create an Injectable with the Parse SDK (I saved this file as parse.ts inside a folder called providers underneath the app folder)

import {Injectable} from 'angular2/core';
var ParseLibrary = require('parse/index');

@Injectable()
export class Parse {
    parse;

    constructor(){
        this.parse = ParseLibrary;
    }

    sdk() {
        return this.parse;
    }
}

2) Use this Injectable in any Component e.g. in app.ts

import {Parse} from './providers/parse';
...

@App({
    ...
    providers: [Parse]
})
export class MyApp {
    ...
    parse;

    constructor(platform: Platform, parse: Parse) {
        platform.ready().then(() => {
            this.parse = parse.sdk();
            this.parse.initialize('myAppId','unused');
            this.parse.serverURL = 'http://127.0.0.1:1337/parse';
            ...
3 Likes
#5

UPDATE:
If the required library exports the module (like parse does) you could also just import Parse as you import any other component:

import {Parse} from 'parse';

TypeScript will complain about this with a Cannot find module XYZ error but it will still work :wink:

#6

Hi,
I’m setting up a Project with Angular 2, TypeScript and Parse Server. Thanks for the help so far, that was really valuable!
What I get as well is the following in the Ionic console:
✗ TypeScript error: xxx/app/ParseManager.ts(3,21): Error TS2307: Cannot find module 'parse'.
(I called the Parse class from your example ParseManager).
But it seems to work when running the the browser - I’m able to load data from the server using a Parse.Query.
I installed parse using
npm install parse --save
and then also did
tsd init
tsd install parse --save.

I’m using this as proposed:
import {Parse} from 'parse';

Although it works anyway, it would be nice if we could get rid of the error :wink:

#7

Is that the same Parse that I heard is closing down? I wouldn’t use that if I were you.

EDIT: Just went to the website. Check this out:

http://parse.com/pricing

http://blog.parse.com/announcements/moving-on/

#8

Yes that’s the same, but Parse is open source now and you can deploy it yourself on AWS, Google App Engine, Heroku, etc. https://github.com/ParsePlatform/parse-server
I think it’s still (or even more?) a good choice as an app backend, especially if you are already using technologies like node.js and MongoDB (which we are).

#9

This does not work for me. But I found another solution.
After installing the package and the typings, I opened the index.js of the node-module ionic-gulp-scripts-copy and added 'node_modules/parse/dist/parse.min.js' to the defaultSrc array.
Then, in my index.html, I included the script above the cordova.js.
Now I just need to declare var Parse: any; in every Component I want to use the SDK in.
For example, in my app.ts:

import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';

import{LoginPage} from './pages/login/login';
declare var Parse: any;

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
})
export class MyApp {

  private rootPage: any;
  private parse;
  constructor(private platform: Platform) {
    //this.rootPage = TabsPage;
    this.rootPage = LoginPage;
    platform.ready().then(() => {
      console.log("Platform ready!");
      // 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();

      Parse.initialize('myStartUp', 'someKey');
      Parse.serverURL = 'http://localhost:1337/parse';
    });
  }
}

ionicBootstrap(MyApp);

I do not think this is the way it should be used, but in the end I can use the SDK pretty easy and without much lines of implementation code.