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

Question

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>

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.

Thus I need to add chart.js as a Global Library Installation (as explained here: https://github.com/angular/angular-cli#global-library-installation )

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.

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
  }
}

How would I go about embedding Chart.js or any other external js library?

I'm using angular-cli: 1.0.0-beta.16. node: 4.4.2. npm: 3.10.6. webpack 2.1.0-beta.22.

Answer 1

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"
      ],
      ...

did the trick. Also no need to link from index.html anymore.

Thanks to asotog for pointing me in the right direction.

--- EDIT (BONUS INFO) ---

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

Answer 2

I have no experience using Chart.js, but per you angular cli config seems you are pointing to the non compiled version of chart js that's why the require errors, you should point to the bundled version.

Based on chart js docs there are some gulp build tasks dedicated to generate the bundle see here https://github.com/chartjs/Chart.js#building-and-testing