Using external framework with angular2

Question

Abit of a generic question, but it is bothering me so much because I have came across so many problems while coding in Angular2.

Angular 2 is a relatively new framework. There are a lot of librarys out there that was built previously before angular 2 came out. I was wondering, can I only use framework that was specifically built for Angular 2? Or would something like papa parse work for me through

npm install --save

How would I know which framework would work without downloading, install and finding out there's an error at the end?

The question is too broad. Libraries and frameworks are apples and oranges. If you're after libraries, you should be aware of how A2 works and which library features may require additional attention to make them work with A2. Usually this concerns libraries that affect DOM (jQuery plugins, etc). — Estus Flask
– Estus Flask, Commented Feb 4, 2017 at 16:15
If you're interested in particular library, Papa Parse, it looks like it just operates on data, I see no reason why it won't work with A2 out of the box, even though it would benefit from A2 adapter to fit the workflow better - observables, Http, etc. — Estus Flask
– Estus Flask, Commented Feb 4, 2017 at 16:16

Kfir Erez · Accepted Answer · 2017-03-01 12:27:14Z

2

If you like to include a global js file (e.g. library) and encapsulate it in your angular2 (ng2) you have several options:

Option 1:

You might find its *.d.ts file in here https://github.com/DefinitelyTyped/DefinitelyTyped and also it is recommended to look here: https://microsoft.github.io/TypeSearch

If you found its @type you should install the library (e.g. npm install --save theLib.js) and install the @type you have found --> Once it is installed you can import the library via your code (e.g. import * as theLib from 'theLib';)

Option 2:

If you can't find it you may try to generate d.ts file. For example if you have your own library that exports a class of some kind. You might want to use the following tool to generate d.ts file: https://github.com/Microsoft/dts-gen

Once d.ts is generated you should include it in your tsconfig.json file (under "files" key)

Option 3:

In case of 3rd party library that suppose to be included as global var in your app (like jquery) but there is no @type anywhere you can include it as follow:

Download the library (any way you find fit)
Include a script tag in your index.html to load the library

< script src="../node_modules/myExtLib/dist/myExtLib.js">< /script>

Add global.d.ts next to tsconfig.json and add the object declaration to it. For example if myExtLib.js create a global var myExtObj:

declare const myExtObj:any;

Add the following to tsconfig.json if not exists

"files": [ "global.d.ts" ]

Now you can access myExtObj globaly.

I personally don't like such global variables so I create a service that reference it and then remove it from global namespace as follow:

The service

import { Injectable } from '@angular/core';

function getWindow():any {
  return window;
}

@Injectable()
export class MyExtObjRefService {
  private _myExtObj:any;

  constructor() {
    let window = getWindow();
    this._myExtObj = window.myExtObj;
    window._myExtObj = null;
    _myExtObj = null;
  }

  get myExtObj() {
    return this._myExtObj;
  }
}

Don't forget to declare it in the module's providers

Now you can access myExtObj from any component by importing the service and call myExtObjRefService.myExtObj without worry that you have junk in your global namespace.

answered Mar 1, 2017 at 12:27

Kfir Erez

3,5002 gold badges21 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user172902 Over a year ago

Is it possible to use the library without d.ts file?

zanther Over a year ago

Whilst the original question is indeed very broad, this answer really helped me out when searching to find how to get PapaParse working in my Angular (v4) app. Thanks! In case this is useful to others, what got my component working was: * npm i papaparse --save * npm i @types/papaparse --save-dev * (in component) import * as Papa from 'papaparse' * (in component file change event) Papa.parse(file, config) as per the PP docs (the config is defined to call two the component's functions e.g. this.parseComplete ) HTH

Kfir Erez Over a year ago

@user172902 - without the d.ts my IDE (Visual Studio Code) complaint that it does not recognize these types

user172902 Over a year ago

Thanks for the great solution. I am thinking there might be a way to do it without d.ts file. I have seen tricks such as declaring the import as type any or something? Not sure of the exact process though.

Kfir Erez Over a year ago

@user172902 Let me know if you find something, that will be awesome

Collectives™ on Stack Overflow

Using external framework with angular2

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related