未捕获的 ReferenceError:在 Angular 2 webpack 全局库安装中未定义 require [英] Uncaught ReferenceError: require is not defined on Angular 2 webpack global library installation
问题描述
我是 Angular 2 的新手.我在我的 angular 2 项目中使用了 ng2-charts.ng2-charts 要求将 Chart.js 嵌入到我的应用程序标头中,例如:
I'm new to Angular 2. I'm using ng2-charts for my angular 2 project. ng2-charts requires Chart.js to be embedded in my application header, as such:
<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 文件夹中.
From my index.html I can't access nodes_modules (Error: GET http://localhost:4200/node_modules/chart.js/dist/Chart.js) . From what I understand it's because node_modules are not 'compiled' into the dist folder.
因此我需要将 chart.js 添加为全局库安装(如下所述:https://github.com/angular/angular-cli#global-library-installation)
Thus I need to add chart.js as a Global Library Installation (as explained here: https://github.com/angular/angular-cli#global-library-installation)
当我这样做时,我得到Uncaught ReferenceError: require is not defined".我认为这是因为 chart.js 是在 systemJS 之前加载的,因此不知道需要".我尝试在 apps[0].scripts 中的 chart.js 之前添加 systemJS,但这也不起作用.
When I do this I get "Uncaught ReferenceError: require is not defined". I assume it's because chart.js is being loaded before systemJS and thus does not know 'require'. I tryed adding systemJS before chart.js in apps[0].scripts but that does not work either.
这是我的 angular-cli.json:
Here's my 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 库?
How would I go about embedding Chart.js or any other external js library?
我正在使用 angular-cli:1.0.0-beta.16.节点:4.4.2.npm:3.10.6.webpack 2.1.0-beta.22.
I'm using angular-cli: 1.0.0-beta.16. node: 4.4.2. npm: 3.10.6. webpack 2.1.0-beta.22.
推荐答案
结果我从 angular-cli.json 链接到了错误的文件.将 angular-cli.json apps[0].scripts 更改为:
Turned out I was linking to the wrong file from my angular-cli.json. Changing angular-cli.json apps[0].scripts to:
...],
"scripts": [
"../node_modules/chart.js/dist/Chart.js"
],
...
成功了.也不再需要从 index.html 链接.
did the trick. Also no need to link from index.html anymore.
感谢 asotog 为我指明了正确的方向.
Thanks to asotog for pointing me in the right direction.
--- 编辑(奖金信息)---
对于那些想要将外部库添加到您的测试中的人,请通过 karma.conf.js 文件数组添加它们:
For those wanting to add external libraries to your tests, add them via the karma.conf.js files array:
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
});
};
这篇关于未捕获的 ReferenceError:在 Angular 2 webpack 全局库安装中未定义 require的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!