javascript - 将外部库导入到 Angular 2 (Systemjs)

Question

我正在尝试使用 this library在我的 Angular 2 项目中。我试过了: npm install search-query-parse --save 然后:

1. Adding via <script> in index.ts - 不明白export在文件中(可以理解)

2. 通过 RequireJS 添加，将其添加到配置文件中，然后使用 import { searchQuery} from 'search-query-parser'; - 我可以看到该文件是通过网络检查器加载的，尽管我无法使用它......我得到 Unhandled Promise rejection: (SystemJS) Can't resolve all parameters

我错过了什么？

编辑:

这是我的 system-config.ts (相关部分...)

map: {
  'search-query-parser': 'npm:search-query-parser'    
},
packages: {
  'search-query-parser': { main: './index.js', defaultExtension: 'js'
}

Answer 1

这很大程度上取决于您的情况下的模块本身。

有多种方法可以解决此问题，但在这种情况下最简单的方法是使用:

import * as searchQuery from 'search-query-parse'

这将解决问题，因为它将导入 searchQuery 常量中的所有内容，因此您将使用:

searchQuery.parse(params)

因为该库公开了 .parse 方法。

或者，您也可以仅导入解析方法:

import { parse } from 'search-query-parse'

并将其用作parse(params)

这是因为方括号表示法 ({}) 将准确查找由暴露方括号中提供的名称的模块导出的方法/属性。

如果两种方法都没有成功，则很可能 SystemJS 根本没有包含该模块(但是，在这种情况下应该显示错误)。 对于此类问题有多种修复方法(其中之一是搜索实际上与 typescript 兼容的节点或 SystemJS 模块)，但最简单的方法是查找包含 systemjs 配置的 HTML 文件，找到包装器(System.import(app))，并且在此类调用之前，自行定义模块:

System.set("search-query-parse", System.newModule(require('search-query-parse'));

通过这种方式，您告诉 SystemJS，在运行时，它需要使节点模块“search-query-parse”在“search-query-parse”下可用，因此在 typescript 中使用他普通风格的 require :

const sqp = require('search-query-parser');

请注意，还有其他方法可以解决此类问题(通常通过 systemjs 文件)，但是这些可能是最简单且可移植的方法。