Uncaught ReferenceError：Angular 2 webpackグローバルライブラリのインストールでrequireが定義されていません

Question

私はAngular 2を初めて使っています。私はAngular 2プロジェクトにng2-chartsを使用しています。 NG2-チャートのような、私のアプリケーションヘッダに埋め込まれるChart.jsが必要です。

<script src="node_modules/chart.js/src/chart.js"></script> 

私のindex.htmlから、私はnodes_modules（エラー：GET http://localhost:4200/node_modules/chart.js/dist/Chart.js）にアクセスすることはできません。 node_modulesはdistフォルダにコンパイルされていないので、私は理解しています。

（ここで説明したように：https://github.com/angular/angular-cli#global-library-installation）したがって、私は、グローバルライブラリのインストールとしてchart.jsを追加する必要があり、私はこれを行うと、私は「キャッチされないにReferenceErrorを：必要が定義されていません」を取得

。私はそれは、chart.jsがsystemJSの前にロードされているため、 'require'が分からないためです。私はapps.ascriptsのchart.jsの前にsystemJSを追加しようとしましたが、どちらもうまくいきません。

ここに私の角度-cli.jsonです：

{ 
"project": { 
    "version": "1.0.0-beta.16", 
    "name": "poc1-iot-monitor-frontend" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": "assets", 
     "index": "index.html", 
     "main": "main.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.json", 
     "prefix": "app", 
     "mobile": false, 
     "styles": [ 
     "styles.css" 
     ], 
     "scripts": [ 
     "../node_modules/systemjs/dist/system.src.js", 
     "../node_modules/chart.js/src/chart.js" 
     ], 
     "environments": { 
     "source": "environments/environment.ts", 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 
    "addons": [], 
    "packages": [], 
    "e2e": { 
    "protractor": { 
     "config": "./protractor.conf.js" 
    } 
    }, 
    "test": { 
    "karma": { 
     "config": "./karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "css", 
    "prefixInterfaces": false 
    } 
} 

にはどうすればChart.jsや他のjs外部ライブラリを埋め込むに行きますか？

私はangular-cliを使用しています：1.0.0-beta.16。ノード：4.4.2。 npm：3.10.6。 webpack 2.1.0-beta.22。

Answer 1

私は私の角度-cli.jsonから間違ったファイルへのリンクであったが、ご覧の束を生成するために専用のいくつかの一気のビルドタスクがあります。 angle-cli.jsonのアプリを変更しました。スクリプトは

 ...], 
     "scripts": [ 
     "../node_modules/chart.js/dist/Chart.js" 
     ], 
     ... 

でした。また、index.htmlからリンクする必要もありません。

正しい方向に私を向けるためのasotogのおかげです。

--- EDIT（BONUS INFO）--- karma.conf.jsファイルの配列を経由してそれらを追加し、あなたのテストに外部ライブラリを追加したい人のために

：

module.exports = function (config) { 
    config.set({ 
    basePath: '', 
    frameworks: ['jasmine', 'angular-cli'], 
    plugins: [ 
     require('karma-jasmine'), 
     require('karma-chrome-launcher'), 
     require('karma-remap-istanbul'), 
     require('angular-cli/plugins/karma') 
    ], 
    files: [ 
     { pattern: "node_modules/chart.js/dist/Chart.js", included: true, watched: false }, 
     { pattern: './src/test.ts', watched: false } 
    ], 
    preprocessors: { 
     './src/test.ts': ['angular-cli'] 
    }, 
    remapIstanbulReporter: { 
     reports: { 
     html: 'coverage', 
     lcovonly: './coverage/coverage.lcov' 
     } 
    }, 
    angularCli: { 
     config: './angular-cli.json', 
     environment: 'dev' 
    }, 
    reporters: ['progress', 'karma-remap-istanbul'], 
    port: 9876, 
    colors: true, 
    logLevel: config.LOG_INFO, 
    autoWatch: true, 
    browsers: ['Chrome'], 
    singleRun: false 
    }); 
}; 

Answer 2

私はChart.jsを使用した経験はありませんが、角度別に設定すると、コンパイルされていないバージョンのチャートjsを指しているようです。その理由は、requireのエラーです。

チャートJSドキュメントに基づいて、ここでhttps://github.com/chartjs/Chart.js#building-and-testing