javascript - เกิดข้อผิดพลาด Uncaught ReferenceError: require ไม่ได้ถูกกำหนด ในการติดตั้งไลบรารีแบบ global ของ Angular 2 ด้วย webpack

ฉันเป็นผู้ใช้ใหม่ของ Angular 2 ฉันกำลังใช้ ng2-charts สำหรับโปรเจกต์ Angular 2 ของฉัน ng2-charts ต้องการให้ Chart.js ถูกฝังในส่วนหัวของแอปพลิเคชันของฉัน ดังนี้:

<script src="node_modules/chart.js/src/chart.js"></script>

จากไฟล์ index.html ของฉัน ฉันไม่สามารถเข้าถึง node_modules ได้ (ข้อผิดพลาด: GET http://localhost:4200/node_modules/chart.js/dist/Chart.js) จากที่ฉันเข้าใจ มันเป็นเพราะว่า node_modules ไม่ได้ถูก 'คอมไพล์' เข้าไปในโฟลเดอร์ dist

ดังนั้นฉันจึงจำเป็นต้องเพิ่ม chart.js เป็นการติดตั้งไลบรารีทั่วโลก (ตามที่อธิบายไว้ที่นี่: https://github.com/angular/angular-cli#global-library-installation)

เมื่อฉันทำเช่นนี้ ฉันได้รับข้อความว่า "Uncaught ReferenceError: require is not defined" ฉันคาดว่าน่าจะเป็นเพราะ chart.js ถูกโหลดก่อน systemJS ซึ่งทำให้มันไม่รู้จัก 'require' ฉันพยายามเพิ่ม systemJS ก่อน chart.js ใน apps[0].scripts แต่ก็ไม่สำเร็จเช่นกัน

นี่คือไฟล์ 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. node: 4.4.2. npm: 3.10.6. webpack 2.1.0-beta.22.

คำตอบ #1

ปรากฏว่าฉันลิงก์ไปยังไฟล์ที่ผิดจาก angular-cli.json ของฉัน การเปลี่ยน angular-cli.json apps[0].scripts เป็น:

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

ได้ผลแล้ว นอกจากนี้ไม่จำเป็นต้องลิงก์จาก index.html อีกต่อไป

ขอบคุณ 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
  });
};

คำตอบ #2

ฉันไม่มีประสบการณ์ในการใช้งาน Chart.js แต่ตามการตั้งค่า Angular CLI ของคุณ ดูเหมือนว่าคุณกำลังชี้ไปที่เวอร์ชันที่ไม่ได้คอมไพล์ของ Chart.js นั่นเป็นเหตุผลที่เกิดข้อผิดพลาด require คุณควรชี้ไปที่เวอร์ชันที่รวมแล้ว

จากเอกสารของ chart js มีงานสร้าง gulp บางงานที่อุทิศให้กับการสร้างแพ็คเกจ ดูได้ที่นี่ https://github.com/chartjs/Chart.js#building-and-testing