在Angular2中使用外部Typescript库(例如angular2-moment) [英] Use external Typescript Library in Angular2 (e.g. angular2-moment)

问题描述

我是Angular2 World(和JS/TS)的新手.到目前为止，我的确在网上找到了所有问题的答案(主要是在stackoverflow上).但是我无法使angular2-Moment正常工作.

i am new to the Angular2 World (and JS/TS). So far, i did find all answers to my questions on the web (mainly on stackoverflow). But i fail to get angular2-moment to work.

我确实按照 Angular2-Moment GitHub-Page 上的说明进行操作，但是我得到了我的应用加载时出现以下错误:

I did follow the instructions on The angular2-Moment GitHub-Page, but i get the following error the moment my app loads:

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";

Webstrom did the import as: import {DateFormatPipe} from "angular2-moment/index";

我试图将其更改为: import {DateFormatPipe} from "angular2-moment";，import {DateFormatPipe} from "angular2-moment/DateFormatPipe";或import {DateFormatPipe} from "angular2-moment/DateFormatPipe.js";，但这无济于事.

I tried to change this to: import {DateFormatPipe} from "angular2-moment";, import {DateFormatPipe} from "angular2-moment/DateFormatPipe"; or import {DateFormatPipe} from "angular2-moment/DateFormatPipe.js"; but this does not help.

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

If i change the import to import {DateFormatPipe} from "node_modules/angular2-moment/DateFormatPipe.js"; i get the following error:

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

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

I dont know what i am doing wrong, could use some help here. Thanks a lot for your help!

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

I use the angular2-rc and want to use it like this:

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

})

感谢@Sasxa，我得以解决我的问题.但是我仍然需要弄清楚一点，因此我将发布确切的解决方案.我将system.config.js更改为:

Thanks to @Sasxa I was able to solve my problem. But I still had to figure it out a little, so i will post my exact solution. I changed my system.config.js to:

....
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";确实可行.

Btw: the right import as import {DateFormatPipe} from "angular2-moment/index"; indeed works.

推荐答案

您需要配置模块加载器(我假设它是SystemJS)才能识别矩矩库.看一下他们的监听器示例，特别是config.js.您需要添加类似于以下内容的内容:

You need to configure your module loader (I assume it's SystemJS) to recognize the moment library. Take a look at their plunker example, config.js specifically. You'll need to add something similar to:

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

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

and maybe set System.config.package too, if default configuration doesn't work...

这篇关于在Angular2中使用外部Typescript库(例如angular2-moment)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！