2016-11-25 18 views
2

私は角度2を使ったプロジェクトとチャート(AmCharts)を作成するための第三者図書館で作業しています。私は、角2に沿ってそれを使用する方法を考え出したが、私は、チャートコンポーネントのユニットテストを作成しようとすると、私はエラーを取得しています:第三者図書館のテストアンガー2ウェブパック

Error: Error in ./ChartsComponent class ChartsComponent - inline template:1:2 caused by: AmCharts is not defined 
    ReferenceError: AmCharts is not defined 

このプロジェクトは角-cliを使用して作成されていて、私たちは」最近、バージョン2.2.1にアップグレードしました。

ここ

ある角度-cli.jsonとkarma.conf.js:

角度-cli.json

{ 
     "project": { 
     "version": "1.0.0-beta.21", 
     "name": "cli-crud-webpack" 
     }, 
     "apps": [ 
     { 
      "root": "src", 
      "outDir": "dist", 
      "assets": [ 
      "assets", 
      "favicon.ico" 
      ], 
      "index": "index.html", 
      "main": "main.ts", 
      "test": "test.ts", 
      "tsconfig": "tsconfig.json", 
      "prefix": "gov", 
      "mobile": false, 
      "styles": [ 
      "styles.scss", 
      "../public/assets/css/agate.css", 
      "../public/assets/css/bootstrap.min.css" 
      ], 
      "scripts": [ 
      "../public/assets/js/highlight.pack.js", 
      "../node_modules/amcharts3/amcharts/amcharts.js", 
      "../node_modules/amcharts3/amcharts/xy.js", 
      "../node_modules/amcharts3/amcharts/gauge.js", 
      "../node_modules/amcharts3/amcharts/serial.js", 
      "../node_modules/amcharts3/amcharts/pie.js", 
      "../node_modules/amcharts3/amcharts/themes/light.js", 
      "../node_modules/amcharts3/amcharts/themes/dark.js", 
      "../node_modules/amcharts3/amcharts/themes/black.js", 
      "../node_modules/amcharts3/amcharts/plugins/responsive/responsive.min.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": "scss", 
     "prefixInterfaces": false, 
     "inline": { 
      "style": false, 
      "template": false 
     }, 
     "spec": { 
      "class": false, 
      "component": true, 
      "directive": true, 
      "module": false, 
      "pipe": true, 
      "service": true 
     } 
     } 
    } 

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: './src/test.ts', watched: false } 
     ], 
     preprocessors: { 
      './src/test.ts': ['angular-cli'] 
     }, 
     mime: { 
      'text/x-typescript': ['ts','tsx'] 
     }, 
     remapIstanbulReporter: { 
      reports: { 
      html: 'coverage', 
      lcovonly: './coverage/coverage.lcov' 
      } 
     }, 
     angularCli: { 
      config: './angular-cli.json', 
      environment: 'dev' 
     }, 
     reporters: config.angularCli && config.angularCli.codeCoverage 
        ? ['progress', 'karma-remap-istanbul'] 
        : ['progress'], 
     port: 9876, 
     colors: true, 
     logLevel: config.LOG_INFO, 
     autoWatch: true, 
     browsers: ['Chrome'], 
     singleRun: false 
     }); 
    }; 
+0

ところで、AmChartsのhttp://github.com/amcharts/amcharts3-angular2ライブラリがあります。少なくともインストールは、それと簡単になると思う:) – noisy

答えて

1

私はちょうど見つけました私はカルマ構成ファイルにamchartsを宣言しなければなりません:

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: './src/test.ts', watched: false }, 
      "./public/assets/js/highlight.pack.js", 
      "./node_modules/amcharts3/amcharts/amcharts.js", 
      "./node_modules/amcharts3/amcharts/xy.js", 
      "./node_modules/amcharts3/amcharts/gauge.js", 
      "./node_modules/amcharts3/amcharts/serial.js", 
      "./node_modules/amcharts3/amcharts/pie.js", 
      "./node_modules/amcharts3/amcharts/themes/light.js", 
      "./node_modules/amcharts3/amcharts/themes/dark.js", 
      "./node_modules/amcharts3/amcharts/themes/black.js", 
      "./node_modules/amcharts3/amcharts/plugins/responsive/responsive.min.js" 
     ], 
     preprocessors: { 
      './src/test.ts': ['angular-cli'] 
     }, 
     mime: { 
      'text/x-typescript': ['ts','tsx'] 
     }, 
     remapIstanbulReporter: { 
      reports: { 
      html: 'coverage', 
      lcovonly: './coverage/coverage.lcov' 
      } 
     }, 
     angularCli: { 
      config: './angular-cli.json', 
      environment: 'dev' 
     }, 
     reporters: config.angularCli && config.angularCli.codeCoverage 
        ? ['progress', 'karma-remap-istanbul'] 
        : ['progress'], 
     port: 9876, 
     colors: true, 
     logLevel: config.LOG_INFO, 
     autoWatch: true, 
     browsers: ['Chrome'], 
     singleRun: false 
     }); 
    }; 
関連する問題