Which npm packages will and will not work on Angular 2? How do I tell?

Question

Does an NPM package need to be modified to be compatible with Angular 2 (eg. add in typings, make directives for them) or will any existing package work? If they're not all compatible, how do I know what is and what is not compatible?

For example, say I want to import this package (https://github.com/pvorb/node-md5). I'm aware there is a ts-md5 package for angular 2 to do md5 - I'm just using this package as an example.

How would I get this to work?

I've installed it using

npm install md5 --save
npm install @types/md5 --save

but I can't seem to be import it

import {md5} from 'md5';

I get this error message after I try to run

Module '"/Users/xxx/Source/tempProjects/ngUnderscore/node_modules/@types/md5/index"' resolves to a non-module entity and cannot be imported using this construct.

I'm not sure what this message means. Does it mean that in its current state, the package is not compatible or am I trying to use the package incorrectly?

Answer 1

I managed to make it work using declare and require instead of import (import won't work for this non-module lib)

declare const require: any;
const md5 = require('md5');

If you don't want to workaround import like this, you can try using Typescript MD5 implementation called ts-md5. Then import like the one below should work. (referenced from this question)

import { Md5 } from 'ts-md5/dist/md5'

If there is no TS implementation, you can search for the types in DefinitelyTyped and then simply install package by npm i --save-dev @types/{package-name}

Answer 2

If the library works on your project depends on many factors: your Angular version, your TypeScript version, etc.

This said, is obvious that we should check the library's documentation and see which dependencies has and its versions, and of course the library should be the Angular 2 version of itself. Following your example, there are several md5 libraries but if you use TypeScript you should maybe consider this one: https://www.npmjs.com/package/ts-md5

If we have all that covered but still there is something not working because of some type of incompatibility, like for example:

My version of angular is 2, the library I just installed works with Angular 4. I have code full of <template>, library uses <ng-template>... What can I do?

You can fork the library in github and modify whatever you need to asure it is compatible with your project. Steps:

1. Fork library repository and modify what you need
2. Subscribe to main library repository in order to be updated with changes
3. In packages.json use your forked version of the library, for example:

"ng2-datetime": "https://github.com/my_user/ng2-datetime/tarball/my_forked_version_name",

4. If you think that your modifications could suit other users... Make a Pull request! :D