3rd Party library testing angular 2 webpack

Question

I am working on a project using angular 2 and a 3rd party library for making charts (AmCharts). I figured out how to use it along angular 2, but I'm getting a error when I try to make a unit test for the chart component:

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

This project has been created using angular-cli and we've recently upgraded angular to version 2.2.1.

Here is angular-cli.json and karma.conf.js:

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

Answer 1

I just found out I have to declare amcharts in karma configuration file, like this:

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