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

Question

I am learning Angular 2, and I already went through Egghead tutorials, but I am pretty new to Angular.

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

I can't seem to find how to enable and use Parse in the service I want to write. This is the simplest code that I want to use to check imports.

 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 Import at the top of the page, including Parse, but where should I get the right library from? I already tried through npm , but to no avail. Has anyone already tried this?

Answer 1

uksz was right. You must first install the component with the command

 npm install --save parse 

After that, you can import it like any other component by typing

 import {Parse} from 'parse'; 

For more details see the link https://forum.ionicframework.com/t/how-to-require-xyz-in-ionic2-angular2/42042

Hope this helps;)

UPDATED

With the new version of angular, this approach stops working. Here is my new step by step: how to use the Parse library in Angular2

• Install the Analysis component in the project

   npm install parse --save 

• Set analysis types

   npm install @types/parse --save 

• import Analysis module

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

• use analysis module

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

Enjoy it with intellisense;)

Answer 2

You can do this using OpaqueToken in Angular2

1 . Create the token that is used to search for the instance, as shown 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 App.module, you need to import and declare a variable , which is the name of your window object, which makes Token a service of Angular2 so that you can use the properties, methods in this javascript file for your components.

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

Step 3: Insert into the array of suppliers of your module.

 { provide : name_of_The_Token , useValue : name_Of_The_Window_Object } 

Guide to using this token in components

• 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'; 

• In the component constructor

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

• 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 of the disadvantages is that you will not get intellisense .

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

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

Answer 3

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

 npm install parse 

Then you need to reference it correctly in your import - you need to specify in which folder the parse.js file is located.