未捕获的ReferenceError:在Angular 2 Webpack全局库安装中未定义require [英] Uncaught ReferenceError: require is not defined on Angular 2 webpack global library installation

问题描述

我是Angular 2的新手.我将ng2-charts用于我的angular 2项目. 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添加为全局库安装(如此处所述:

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:未定义".我认为这是因为chart.js在systemJS之前加载，因此不知道'require'.我尝试在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屋！