在Angular 2中使用第三方库（parse.com）

Question

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?

Answer 1

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;)

Answer 2

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;
      .....
   }

Answer 3

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.