我是Angular 2的新手。我正在使用ng2-charts作为我的角度2项目。 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 is not defined”。我认为这是因为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。 webpack 2.1.0-beta.22。
答案 0 :(得分:9)
原来我从angular-cli.json链接到了错误的文件。将angular-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
});
};
答案 1 :(得分:3)
我没有使用Chart.js的经验,但根据你的角度cli配置似乎你指向图表js的非编译版本,这就是require
错误的原因,你应该指向捆绑的版本
根据图表js文档,有一些专门用于生成捆绑的gulp构建任务,请参阅此处https://github.com/chartjs/Chart.js#building-and-testing