Uncaught ReferenceError: require is not defined on Angular 2 webpack global library installation

Question

我是 Angular 2 的新手。我正在为我的 angular 2 项目使用 ng2-charts。 ng2-charts 需要 Chart.js 嵌入我的应用程序 header，因此：

<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 没有 'compiled' 进入 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.

Answer 1

我没有使用 Chart.js 的经验，但是根据您的 angular cli 配置，您似乎指向了图表 js 的非编译版本，这就是 require 错误的原因，您应该指向捆绑版本。

根据图表 js 文档，有一些 gulp 构建任务专用于生成包，请参阅此处 https://github.com/chartjs/Chart.js#building-and-testing

Answer 2

原来我 link 从我的 angular-cli.json 访问了错误的文件。将 angular-cli.json apps[0].scripts 更改为：

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

成功了。也不再需要从 index.html link 了。

感谢 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
  });
};

Uncaught ReferenceError: require is not defined on Angular 2 webpack global library installation

Uncaught ReferenceError: require is not defined on Angular 2 webpack global library installation

javascript

typescript

webpack

angular-cli

angular