view raw
chaze chaze - 6 months ago 274
TypeScript Question

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

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:

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": [
"scripts": [
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/"
"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.


Turned out I was linking to the wrong file from my angular-cli.json. Changing angular-cli.json apps[0].scripts to:

      "scripts": [

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

Thanks to asotog for pointing me in the right direction.