Question

是否需要修改NPM包以与Angular 2兼容（例如，添加类型，为它们制定指令）或任何现有的包是否有效？如果它们不兼容，我怎么知道什么是不兼容的？

例如，假设我要导入此包（https://github.com/pvorb/node-md5）。我知道有一个用于角度2的ts-md5包来做md5 - 我只是以这个包为例。

我怎样才能让它发挥作用？

我已经使用

安装了它

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

但我似乎无法将其导入

import {md5} from 'md5';

我尝试运行

后收到此错误消息

模块 ' “/用户/ XXX /源/ tempProjects / ngUnderscore / node_modules / @类型/ MD5 /索引”' 解析为非模块实体，无法使用此实例导入构造

我不确定这条消息的含义。这是否意味着在当前状态下，包不兼容或者我是否尝试错误地使用包？

Answer 1

我设法使用declare和require而不是import（导入对这个非模块的lib不起作用）

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

如果您不想像这样解决导入问题，可以尝试使用名为ts-md5的Typescript MD5实现。然后导入像下面的那个应该工作。 （引自this question）

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

如果没有TS实施，您可以在DefinitelyTyped中搜索类型，然后只需按npm i --save-dev @types/{package-name}安装包

Answer 2

如果库适用于您的项目取决于许多因素：Angular版本，TypeScript版本等。

这说明，我们应该查看库的文档，看看哪些依赖项及其版本，当然库应该是Angular 2版本。按照你的例子，有几个md5库，但如果你使用TypeScript，你应该考虑这个：https://www.npmjs.com/package/ts-md5

如果我们已经涵盖了所有内容，但由于某种类型的不兼容性仍然存在某些不起作用，例如：

我的angular版本是2，我刚刚安装的库与Angular 4一起工作。我的代码满<template>，库使用<ng-template> ...我该怎么办？ / em>的

您可以在github中分叉库并修改您需要的任何内容，以确保它与您的项目兼容。步骤进行：

Fork库存储库并修改您需要的内容

订阅主库存储库以便通过更改进行更新

在packages.json中使用您的分叉版本的库，例如：

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

如果您认为您的修改可能适合其他用户......提出拉请求！：d

Answer 3

这更像是一个TypeScript问题，因为md5不是Angular包。关键是要使导入正确等同于require（）函数。

import * as md5 from "md5";

直接在TypeScript文件中使用：

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

要在模板上使用它，最好将它用于方法实现，但也可以直接公开。将其添加为Component上的属性：

md5: any = md5;

然后在模板上：

{{md5('message')}}

Answer 4

他们通常说出它的意思是哪个Angular，有时候你有两个包或者每个包。

如果您使用的是Angular 1x软件包并且没有Angular2兼容性，则可以使用ngUpgrade。

但是如果你使用的是通用插件，那么必须有一个角度2解决方案。

如果你想要反过来那么你可能会走错路。

Answer 5

您遇到的问题与Angular无关。导入CommonJS包时，这是TypeScript上存在的问题。

经验法则（我的建议）是在导入CommonJS时使用互操作功能（即import * as X from 'x'）并使用＆＃34; old＆＃34;语法代替（即import X = require('x')）。

当CommonJS以module.exports = function() {...}的形式导出函数时，import * as X from 'x'不起作用。

这包括包导出ES6类但是使用Babel转换为ES5的情况。

你可能会看到一些软件包可以使用这种语法，但那是因为打字中有一个黑客攻击：

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

还有其他原因，互操作不是一个好主意，包括TypeScript（import * X from 'x'）和Babel（import X from 'x'）之间的语法不同意。

您可以在此处了解详情，并点击链接： https://github.com/unional/typescript-guidelines/blob/master/pages/default/modules.md#import-keyword

更新：发布了TypeScript@2.7，您现在可以直接执行import EditableElement from 'Transformer'。

启用esModuleInterop

中的tsconfig.json

哪些npm包将在Angular 2上运行？我怎么说？

5 个答案: