非同期ライブラリをAngular 2で使用するには？

Question

Angular 2（2.0.0-rc.1）アプリケーションで非同期ライブラリを正常にインポートできません。 https://github.com/caolan/async#es-modules

私は次のエラーを取得する：

zone.js:101 GET http://localhost:3003/traceur 404 (Not Found) 
(index):31 Error: Error: XHR error (404 Not Found) loading http://localhost:3003/traceur(…) 

は、ここに私がやったことだ： "systemjs.config.js" で

npm install async-es --save 

：

(function (global) { 

    // map tells the System loader where to look for things 
    var map = { 
     // ... 
     'async-es': 'node_modules/async-es' 
    }; 

    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
     // ... 
     'async-es': { main: 'index.js', 'defaultExtension': 'js' } 
    }; 

    // ... 

    System.config(config); 
})(this); 

私」で。コンポーネント.ts "：

import {async} from 'async-es'; 

他のライブラリのインポートのようにしてインポートしようとしました。

ありがとうございました。

Answer 1

あなたが使っているAngular2のバージョンはちょっと古い（アルファ）と思います。ベータ版またはrc版を使用してください。

<script src="node_modules/zone.js/dist/zone.js"></script> 
<script src="node_modules/reflect-metadata/Reflect.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 

<!-- 2. Configure SystemJS --> 
<script src="systemjs.config.js"></script> 
<script> 
    System.import('app').catch(function(err){ console.error(err); }); 
</script> 

とsystemjs.config.js 1の内容：：

：

var map = { 
    'app': 'app', // 'dist', 
    'rxjs': 'node_modules/rxjs', 
    '@angular': 'node_modules/@angular' 
}; 

var packages = { 
    'app': { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs': { defaultExtension: 'js' }, 
}; 

var packageNames = [ 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/core', 
    '@angular/http', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 
    '@angular/router', 
    '@angular/router-deprecated', 
    '@angular/testing', 
    '@angular/upgrade', 
]; 

packageNames.forEach(function(pkgName) { 
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
}); 

var config = { 
    map: map, 
    packages: packages 
} 

if (global.filterSystemConfig) { global.filterSystemConfig(config); } 

System.config(config); 

詳細については、このリンクを参照してくださいここで

は、あなたのメインのHTMLファイルの構成があります

• https://angular.io/guide/quickstart