CODEWITHSUNDEEP
javascriptangularparse-platform
ThijsM
ThijsM

Reputation: 200

Use third party library (parse.com) in Angular 2

I am learning Angular 2 and I followed the tutorials of Egghead already, but I am pretty new to everything concerning Angular.

Now I want to do something more advanced and start using Parse.com with Angular 2. Normally I would include the parse.com library in the index.html page via <script src="//www.parsecdn.com/js/parse-1.6.2.min.js"></script>, but I want to write a ParseService via Angular 2 that I can use to manage the backend.

I can't seem to find how to include and use Parse in the service I want to write. This is the very basic code I want to use to test the import.

import {Injectable} from 'angular2/core';
import {Parse} from '.../...'; // <-- This is what I want to do

@Injectable()
export class ParseService {
    constructor() {
        console.log('Creating ParseService');

        Parse.initialize('', '');
    }
}

I need some kind of Import at the top of the page including Parse, but from where should I get the necessary library? I already tried via npm but without success. Anyone already tried this?

Upvotes: 6

Views: 1943

Answers (3)

Jan Kuta
Jan Kuta

Reputation: 196

uksz was right. You has to first install the component by the command

npm install --save parse

After that you can import it as any other component by typing

import {Parse} from 'parse';

For more info look at this link https://forum.ionicframework.com/t/how-to-require-xyz-in-ionic2-angular2/42042

Hope it helps;)

UPDATED

With new version of angular this approach stopped to work. Here is my new step by step: how to use Parse library in Angular2

  1. Install Parse component to the project

    npm install parse --save

  2. Install Parse types

    npm install @types/parse --save

  3. import Parse module

    const Parse: any = require('parse');

  4. use Parse module

    Parse.initialize("key");
...

Enjoy it with intellisense;)

Upvotes: 6

Aravind
Aravind

Reputation: 41533

You can do that by using OpaqueToken in Angular2

1. Create a Token that is used to find an instance as below in a separate ts file.

import { OpaqueToken } from '@angular/core'

export let name_of_The_Token = new OpaqueToken('name_Of_The_Window_Object');

2. In your App.module, you need to import and declare a variable that is the name of your window object which makes the Token as a angular2 service so that you can use properties, methods in that javascript file across your components.

import { name_of_The_Token } from '/* file_Path */';
declare let name_Of_The_Window_Object : any;  //below your import statements

Step 3: Inject it to providers array of your module.

{ provide : name_of_The_Token , useValue : name_Of_The_Window_Object }

Guidance to use this token in components

  1. Import the token just like any other service and @Inject from angular-core

     import { name_of_The_Token } from '/* file_Path */';
 import { Inject } from '@angular/core';

  2. In constructor of the component 

     constructor(@Inject( name_of_The_Token ) private _serviceObject : any )

  3. Any where in your component you can use the variables and methods of your javascript file as 

     this._serviceObject.method1()
 this._serviceObject.variable1
 .....

Note: One drawback is that you will not get intellisense.

Overcoming it: If you are looking for intellisense you need to wrap the methods and variables inside an interface and use it in the type**(instead of any)** of your token as 

export interface myCustom {
      method1(args): return_Type;
      method2(args): void;
      .....
   }

Upvotes: 0

uksz
uksz

Reputation: 18699

What you need to do, is you need to download Parse library with:

npm install parse

Then, you need to reference it in your import in the right way - you need to specify in which folder the parse.js file is placed at.

Upvotes: -1

Related Questions