Angular2 快速入门:我应该如何包含一个新的 npm 包?

Angular2 quickstart: how should I include a new npm package?

我通过克隆 angular2 快速启动存储库来设置环境:https://github.com/angular/quickstart。在我将新包添加到 system.config.js 文件后,应用程序运行但 "npm test" 失败。我注意到有一个名为 systemjs.config.extras.js 的空文件,我应该在那里添加一些代码吗?

问题: 如何将新的 npm 包添加到 angular2 快速入门示例,以便 "npm start" 和 "npm test" 都可以通过?

您应该尝试 angular-cli,这是使用 angular2 的推荐方式。 要创建一个新项目,您必须使用命令 angular-cli 安装

npm install -g angular-cli

然后你可以用

创建一个新的angular2项目
ng new your-new-project-name

最后按照本指南 (https://github.com/angular/angular-cli#global-library-installation) 添加新的全局依赖项。 bootstrap.

我在这里转载内容
npm install bootstrap@next

然后将需要的脚本文件添加到agular-cli.json文件中的apps[0].scripts:

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

最后将BootstrapCSS添加到agular-cli.json中的apps[0].styles数组中:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.css"
],

最后,您可以使用 ng serve 从新创建的项目的根目录部署您的应用程序。

After I added new package into system.config.js file, the app runs but "npm test" failed

我假设您正在使用 Karma。您需要做的是将该第三方库添加到 karma.conf.js 文件中的 files 数组。

它的工作原理是 karma 启动服务器,并将 files 数组中列出的所有文件添加到服务器可提供服务的文件列表中。因此,当 SystemJS 尝试加载文件时,如果它不在业力 files 中,则该文件在服务器上不存在。因此,当您尝试从 SystemJS 检索该文件时,您将得到一个 404。