私はAngular2を初めて使用します。Angular2プロジェクトにng2-chartsを使用しています。ng2-chartsでは、次のように、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フォルダーに「コンパイル」されていないためです。
したがって、chart.jsをグローバルライブラリインストールとして追加する必要があります（ここで説明されているように：https：//github.com/angular/angular-cli#global-library-installation）
これを行うと、「Uncaught ReferenceError：require isnotdefined」が表示されます。これは、chart.jsがsystemJSの前にロードされているため、「require」がわからないためだと思います。apps [0] .scriptsのchart.jsの前にsystemJSを追加しようとしましたが、それも機能しません。
これが私のangular-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。webpack2.1.0-beta.22。
私はangular-cli.jsonから間違ったファイルにリンクしていたことが判明しました。angle-cli.json apps [0] .scriptsを次のように変更します。
...],
"scripts": [
"../node_modules/chart.js/dist/Chart.js"
],
...
トリックをしました。また、index.htmlからリンクする必要もなくなりました。
私を正しい方向に向けてくれたasotogに感謝します。
---編集（ボーナス情報）---
テストに外部ライブラリを追加したい場合は、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
});
};
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加