在 Angular2 中使用外部 Typescript 库（例如 angular2-moment）答案

【问题标题】：Use external Typescript Library in Angular2 (e.g. angular2-moment)在 Angular2 中使用外部 Typescript 库（例如 angular2-moment）
【发布时间】：2016-06-12 17:24:51
【问题描述】：

我是 Angular2 世界（和 JS/TS）的新手。到目前为止，我确实在网上找到了我的问题的所有答案（主要是在 stackoverflow 上）。但我无法让 angular2-moment 工作。

我确实按照The angular2-Moment GitHub-Page 上的说明进行操作，但在我的应用加载时出现以下错误：

angular2-polyfills.js:127 GET http://localhost:8080/angular2-moment 404 (Not Found)
http://localhost:8080/angular2-moment(…)

Webstrom 导入为： import {DateFormatPipe} from "angular2-moment/index";

我尝试将其更改为： import {DateFormatPipe} from "angular2-moment";、import {DateFormatPipe} from "angular2-moment/DateFormatPipe"; 或 import {DateFormatPipe} from "angular2-moment/DateFormatPipe.js"; 但这无济于事。

如果我将导入更改为import {DateFormatPipe} from "node_modules/angular2-moment/DateFormatPipe.js";，则会收到以下错误：

GET http://localhost:8080/moment 404 (Not Found)
http://localhost:8080/moment(…)

我不知道我做错了什么，可以在这里使用一些帮助。非常感谢您的帮助！

我使用 angular2-rc 并想像这样使用它：

@Component({
selector: ...,
template: ...,
pipes: [DateFormatPipe]

})

编辑：感谢@Sasxa，我能够解决我的问题。但我仍然需要弄清楚一点，所以我会发布我的确切解决方案。我将我的system.config.js 更改为：

....
var map = {
    'app':                          'build/app', // 'dist',
    '@angular':                     'node_modules/@angular',
    'angular2-in-memory-web-api':   'node_modules/angular2-in-memory-web-api',
    'rxjs':                         'node_modules/rxjs',
    'moment':                       'node_modules/moment/moment.js', //<--this
    'angular2-moment':              'node_modules/angular2-moment' //<--this
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app':                          { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                         { defaultExtension: 'js' },
    'angular2-in-memory-web-api':   { main: 'index.js', defaultExtension: 'js' },
    'angular2-moment':              { defaultExtension: 'js' }//<--this
};
...

顺便说一句：import {DateFormatPipe} from "angular2-moment/index"; 的正确导入确实有效。

【问题讨论】：

标签： typescript angular momentjs

【解决方案1】：

你需要配置你的模块加载器（我假设它是 SystemJS）来识别时刻库。具体看一下their plunker example、config.js。您需要添加类似于以下内容的内容：

System.config({
  map: {
    'moment': 'path/to/moment/library'
    'angular2-moment': 'path/to/angular2-moment/library'
  }
});

如果默认配置不起作用，也可以设置System.config.package...

【讨论】：