将外部库导入 Angular 2 (Systemjs)

Question

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

Adding via <script> in index.ts - 不理解文件中的 export（可以理解）
通过将 RequireJS 添加到配置文件然后使用 import { searchQuery} from 'search-query-parser'; 添加 - 我可以看到文件是通过网络检查器加载的，但我不能使用它.. . 我得到 Unhandled Promise rejection: (SystemJS) Can't resolve all parameters

我错过了什么？

编辑：

这是我的系统-config.ts（相关部分...）

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

Answer 1

这通常是您引入外部脚本的方式，以便将其捆绑并可供应用程序使用（假设您使用的是 CLI）：在 angular-cli.json 中，请注意"script" 元素。试着把它放在那里，然后它会被捆绑起来，部门会（希望）解决。我已经为许多不同的脚本完成了此操作，它们总是有效。

"mobile": false,
    "styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.css",
      "../node_modules/font-awesome/css/font-awesome.css",
      "styles.css"
    ],
    "scripts": ["./app/my_script.js"],
    "environments": {
      "source": "environments/environment.ts",
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }

就此写了一篇文章：http://www.tcoz.com/newtcoz/#/errata

Answer 2

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

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

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

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

searchQuery.parse(params)

因为库公开了一个 .parse 方法。

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

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

并将其用作 parse(params)

这是因为方括号表示法 ({}) 看起来完全方法 / 属性暴露模块导出的名称括号。

如果这两种方法仍然没有成功，则可能是 SystemJS 根本没有包含该模块（但是，在这种情况下应该会显示错误）。有几个针对此类问题的修复程序（其中之一是搜索实际上与打字稿兼容的节点或 SystemJS 模块），但最简单的方法是查找包含 systemjs 配置的 HTML 文件，找到包装器（System.import(app)），并在调用之前，自己定义模块：

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

通过这种方式，您告诉 SystemJS，在运行时，它需要使节点模块 "search-query-parse" 在 "search-query-parse" 下可用，因此在打字稿中使用他 vanilla-style 需要:

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

请注意，还有其他方法可以解决此类问题（通常通过 systemjs 文件），但这些方法可能是最简单和便携的方法。

将外部库导入 Angular 2 (Systemjs)

Import external library to Angular 2 (Systemjs)

javascript

systemjs

angular