Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 733
Diskdrive Avatar asked Mar 26 '17 14:03

Diskdrive


People also ask

How do I check my npm packages?

Use the npm list to show the installed packages in the current project as a dependency tree. Use npm list --depth=n to show the dependency tree with a specified depth. Use npm list --prod to show packages in the dependencies . Use npm list --dev to show packages in the devDependencies .

What are npm packages in Angular?

The Angular Framework, Angular CLI, and components used by Angular applications are packaged as npm packages and distributed using the npm registry. You can download and install these npm packages by using the npm CLI client, which is installed with and runs as a Node. js® application.


2 Answers

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}

like image 185
Vojtech Avatar answered Oct 24 '22 06:10

Vojtech


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",

  1. If you think that your modifications could suit other users... Make a Pull request! :D
like image 34
SrAxi Avatar answered Oct 24 '22 07:10

SrAxi