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

我错过了什么？

编辑：

这是我的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，在运行时，它需要制作节点模块＆＃34; search-query-parse＆＃34;在＆＃34; search-query-parse＆＃34;下可用，所以在打字稿中使用他的香草风格需要：

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

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

Answer 2

这通常是如何引入外部脚本，使其捆绑并可供应用程序使用（假设您使用的是CLI）：在angular-cli.json中，请注意“script”元素。尝试将它放在那里，它将被捆绑，并且deps将（希望）解决。我已经为许多不同的脚本做了这个，它们总能工作。

"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

将外部库导入Angular 2（Systemjs）

2 个答案: