角度2のjavascriptライブラリを含めるにはどうすればよいですか？

Question

角度2のjavascriptライブラリを使用するにはどうすればよいですか？私はいつもそれがモジュールではないというエラーを受け取ります。

javascriptファイルを指すindex.htmlファイルにスクリプトタグを追加し、System.configのパスに追加してインポートすると、モジュールではないというエラーが表示されます。

私は既にthisを試しましたが、私はthisも試しました。彼らはそれが簡単であることを指摘しているようで、何百ものライブラリのどれでも使用できるという事実にもかかわらず、どちらも動作しません。ここで

はJavaScriptライブラリです：sheetjs

私は角2でこの作業を行うにはどうすればよいですか？

index.htmlを

<script src="../node_modules/xlsx/xlsx.js" type="text/javascript"></script> 

システムconfig.ts

System.config({ 
... 
    path: { 
     xlsx: '../node_modules/xlsx/xlsx.js' 
    } 
}); 

something.ts

import * as xlsx from 'xlsx'; 

エラーメッセージ：

Error: Typescript found the following errors: 
    C:/___/tmp/broccoli_type_script_compiler-input_base_path-o4TZ9PSC.tmp/0/src/app/something/something.component.ts (9, 23): Cannot find module 'xlsx'. 

Answer 1

私systemjs.config.js

(function(global) { 
     // map tells the System loader where to look for things 
     var map = { 
     'src':      'src', // 'dist', 
     'bin':      'bin', 
     '@angular':     '/node_modules/@angular', 
     'angular2-in-memory-web-api': '/node_modules/angular2-in-memory-web-api', 
     'rxjs':      '/node_modules/rxjs' 
     }; 
     // packages tells the System loader how to load when no filename and/or no extension 
     var packages = { 
     'src':      { defaultExtension: 'js' }, 
     'bin':      { defaultExtension: 'js' }, 
     'rxjs':      { defaultExtension: 'js' }, 
     'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 
     }; 
     var ngPackageNames = [ 
     'common', 
     'compiler', 
     'core', 
     'http', 
     'platform-browser', 
     'platform-browser-dynamic', 
     'router', 
     'router-deprecated', 
     'upgrade', 
     ]; 
     // Individual files (~300 requests): 
     function packIndex(pkgName) { 
     packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
     } 
     // Bundled (~40 requests): 
     function packUmd(pkgName) { 
     packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' }; 
     }; 
     // Most environments should use UMD; some (Karma) need the individual index files 
     var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 
     // Add package entries for angular packages 
     ngPackageNames.forEach(setPackageConfig); 
     var config = { 
     map: map, 
     packages: packages 
     } 
     System.config(config); 
    })(this); 

は、この内のマップ変数に含まれています。

「xlsx」：{defaultExtension： 'js'}を変数に追加します。その後、あなたのindex.htmlに

Answer 2

後に追加たぶんこのことができます：

を私はあなたがsheetjs/XLSXライブラリを実装しようとしていることに、気づきました。使用可能なtypescript用XLSXライブラリhereがあり、これはangular2で動作します！

デモをお探しの場合は、hereをご覧ください。

Answer 3

あなたのindex.htmlコンテンツは含まれていませんが、基本コンポーネントの前に <script src="../node_modules/xlsx/xlsx.js" type="text/javascript"></script>タグがインポートされているとします。それが真であれば、基本コンポーネントとtypescriptの後にスクリプトをインポートしてみてください：declare var xlsx:any;