Quels paquets npm vont et ne fonctionneront pas sur Angular 2? Comment je le dis?

Question

Est-ce qu'un paquetage NPM doit être modifié pour être compatible avec Angular 2 (par exemple, ajouter des dactylogrammes, faire des directives à leur sujet) ou est-ce que tout paquet existant fonctionnera? Si elles ne sont pas toutes compatibles, comment savoir ce qui est compatible et ce qui ne l'est pas? Par exemple, disons que je veux importer ce package (https://github.com/pvorb/node-md5). Je suis conscient qu'il existe un paquet ts-md5 pour angulaire 2 à faire md5 - J'utilise juste ce paquet comme exemple.

Comment est-ce que je pourrais faire fonctionner ceci?

Je l'ai installé en utilisant

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

, mais je ne peux pas sembler être l'importer

import {md5} from 'md5'; 

Je reçois ce message d'erreur après que je tente de lancer

''/Utilisateurs/xxx/Source/tempProjects/ngUnderscore/node_modules/@ types/md5/index '' ''/résout en un non-mod Cette entité ne peut pas être importée à l'aide de cette construction .

Je ne suis pas sûr de savoir ce que ce message signifie. Est-ce que cela signifie que dans son état actuel, le paquet n'est pas compatible ou est-ce que j'essaie d'utiliser le paquet de façon incorrecte?

Answer 1

Ils indiquent généralement quel angle il est destiné, parfois vous avez un paquet pour les deux ou pour chacun.

Si vous utilisez un package Angular 1x et qu'il n'y a pas de compatibilité Angular2, vous pouvez simplement utiliser ngUpgrade.

Mais si vous utilisez un plugin commun, il doit y avoir une solution angulaire.

Si vous voulez l'inverse, alors vous allez probablement dans le mauvais sens.

Answer 2

j'ai réussi à le faire fonctionner à l'aide de déclarer et d'exiger au lieu d'importation (importation ne fonctionnera pas pour cette lib non-module)

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

Si vous ne voulez pas contourner l'importation comme celui-ci, vous peut essayer d'utiliser l'implémentation de Typescript MD5 appelée ts-md5. Puis importer comme celui ci-dessous devrait fonctionner. (référencé à partir this question)

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

S'il n'y a pas la mise en œuvre de TS, vous pouvez rechercher les types dans DefinitelyTyped puis installez simplement paquet par npm i --save-dev @types/{package-name}

Answer 3

Si les travaux de la bibliothèque sur votre projet dépend de nombreux facteurs: votre version angulaire, votre version de TypeScript, etc.

Cela dit, il est évident que nous devrions vérifier la documentation de la bibliothèque et voir quelles dépendances a et ses versions, et bien sûr la bibliothèque devrait être l'angulaire 2 version de lui-même.Suivant votre exemple, il existe plusieurs bibliothèques md5 mais si vous utilisez TypeScript vous devriez peut-être considérer celui-ci: https://www.npmjs.com/package/ts-md5

Si nous avons tout ce qui est couvert mais il y a toujours quelque chose qui ne fonctionne pas en raison d'un type d'incompatibilité, comme par exemple:

Ma version de angulaire est 2, la bibliothèque que je viens d'installer fonctionne avec Angular 4. J'ai le code complet de <template>, la bibliothèque utilise <ng-template> ... Que puis-je faire?

Vous pouvez forker la bibliothèque dans github et modifier tout ce dont vous avez besoin pour vous assurer qu'elle est compatible avec votre projet. Étapes:

1. dépôt bibliothèque Fork et de modifier ce que vous avez besoin
2. Abonnez-vous au principal dépôt de la bibliothèque afin d'être mis à jour avec les changements
3. En packages.json utiliser votre version fourchue de la bibliothèque, par exemple:

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

4. Si vous pensez que vos modifications pourraient convenir à d'autres utilisateurs ... Faites une demande Pull! : D

Answer 4

Il s'agit davantage d'une question TypeScript car md5 n'est pas un paquet Angular. La clé consiste à obtenir l'importation correcte pour être équivalente à une fonction require().

import * as md5 from "md5"; 

Utilisez directement dans le fichier tapuscrit:

console.log(md5('message')); 

Pour utiliser sur le modèle, de préférence, il doit être utilisé dans la mise en œuvre de la méthode, mais peut aussi être directement exposé. Ajoutez comme une propriété sur le composant:

md5: any = md5; 

Ensuite, sur le modèle:

{{md5('message')}} 

Answer 5

Le problème rencontré est pas liée à angulaire. C'est un problème existant sur TypeScript lors de l'importation de paquets CommonJS. La règle générale (ma recommandation) est de ne pas utiliser la fonction d'interopérabilité (c'est-à-dire import * as X from 'x') lors de l'importation de CommonJS et d'utiliser à la place la syntaxe "old" (c'est-à-dire import X = require('x')). Lorsque CommonJS exporte une fonction sous la forme module.exports = function() {...}, import * as X from 'x' ne fonctionne pas.

Ceci inclut le cas où le paquet est en train d'exporter une classe ES6 mais qui passe à ES5 avec Babel.

Vous pouvez voir certains paquets ne fonctionnent avec cette syntaxe, mais c'est parce que les typages ont un hack en elle:

declare module 'x' { 
    function foo(): void 
    namespace foo {} // <-- the hack 
    exports = foo 
} 

Il y a d'autres raisons pour lesquelles le Interop est pas une bonne idée, y compris la syntaxe entre TypeScript (import * X from 'x') et Babel (import X from 'x') ne sont pas d'accord.

Vous pouvez en apprendre davantage à ce sujet ici et suivez les liens: https://github.com/unional/typescript-guidelines/blob/master/pages/default/modules.md#import-keyword

MISE À JOUR: avec TypeScript@2.7 libéré, vous pouvez maintenant faire directement import EditableElement from 'Transformer'.

Allumez esModuleInterop dans votre tsconfig.json