Uncaught ReferenceError: require ist nicht definiert auf Angular 2 webpack globale Bibliothek Installation

Question

Ich bin neu in Angular 2. Ich verwende ng2-Charts für mein eckiges 2-Projekt. NG2-Charts erfordert Chart.js in meiner Anwendung Header eingebettet zu sein, als solche:

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

Aus meiner index.html kann ich nicht nodes_modules zugreifen (Error: GET http://localhost:4200/node_modules/chart.js/dist/Chart.js). Soweit ich es verstehe, liegt es daran, dass Knotenmodule nicht in den Ordner "dist" kompiliert werden.

So muss ich chart.js als globale Bibliothek Installation hinzuzufügen (wie hier erklärt: https://github.com/angular/angular-cli#global-library-installation)

Wenn ich das tue ich „Uncaught Reference: require ist nicht definiert“. Ich nehme an, es liegt daran, dass chart.js vor systemJS geladen wird und daher nicht "require" kennt. Ich habe versucht, systemJS vor chart.js in apps [0] .scripts hinzuzufügen, aber das funktioniert auch nicht.

Hier ist mein Winkel 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 
    } 
} 

Wie würde ich mich über Chart.js oder andere externe js Bibliothek einbetten?

Ich benutze angular-cli: 1.0.0-beta.16. Knoten: 4.4.2. npm: 3.10.6. webpack 2.1.0-beta.22.

Answer 1

Ich stellte sich heraus, wurde von meinem Winkel cli.json auf die falsche Datei zu verknüpfen. Ändern Winkel-cli.json apps [0] .Scripte zu:

haben den Trick gemacht. Es ist auch nicht mehr notwendig, von index.html zu verlinken.

Dank asotog für mich in die richtige Richtung.

--- EDIT (BONUS INFO) ---

Für diejenigen, externe Bibliotheken zu Ihren Tests hinzufügen möchten, fügen Sie sie über die karma.conf.js Dateien 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

Ich habe keine Erfahrung mit Chart.js, aber pro angular cli config scheint, Sie zeigen auf die nicht kompilierte Version von Diagramm js, warum die require Fehler, sollten Sie auf die gebündelte Version verweisen.

Basierend auf Diagramm js docs gibt es einige schluck Build Aufgaben gewidmet das Bündel zu erzeugen, siehe hier https://github.com/chartjs/Chart.js#building-and-testing