Uncaught ReferenceError：require在Angular 2 webpack全局庫安裝中沒有定義

Question

我是Angular 2的新手。我對我的angular 2項目使用ng2-charts。 NG2-圖表需要chart.js之被嵌入在我的應用程序標題，因爲這樣的：

<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沒有「編譯」到dist文件夾中。

因此我需要添加chart.js之作爲一個全球圖書館安裝（如下解釋：https://github.com/angular/angular-cli#global-library-installation）

當我這樣做，我得到「未捕獲的ReferenceError：要求沒有定義」。我認爲這是因爲chart.js在systemJS之前被加載，因此不知道'require'。我嘗試在應用程序[0] .scripts中的chart.js之前添加systemJS，但這也不起作用。

這裏是我的角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

原來我被鏈接到從我的角度，cli.json錯誤的文件，一些一飲而盡構建任務。將angular-cli.json應用[0]。腳本更改爲：

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

訣竅。也無需再從index.html鏈接。

感謝asotog指引我在正確的方向。

--- EDIT（BONUS INFO）---

對於那些想要外部庫添加到您的測試，通過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 
    }); 
}; 

Answer 2

我沒有使用Chart.js的經驗，但根據你的角度cli配置似乎你指向非編譯版本的圖表js這就是爲什麼require錯誤，你應該指向捆綁版本。

基於圖表的js文件也有專門用於生成束在這裏看到https://github.com/chartjs/Chart.js#building-and-testing