javascript - Uncaught ReferenceError: require is not defined on Angular 2 webpack global library installation - Stack Overflow

admin管理员组

文章数量:1279237

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 'piled' 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": [
        "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.

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 'piled' into the dist folder.

Thus I need to add chart.js as a Global Library Installation (as explained here: https://github./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.

• javascript
• angular
• typescript
• webpack
• angular-cli

Share Improve this question Follow edited Oct 24, 2016 at 6:50 chaze asked Oct 21, 2016 at 14:03 chazechaze 39511 gold badge33 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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

I have no experience using Chart.js, but per you angular cli config seems you are pointing to the non piled 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./chartjs/Chart.js#building-and-testing

本文标签：