typescript - Angular-cli , Karma, "you may need an appropriate loader ___Karma___: ANY -

i having issue using angular-cli karma unit testing angular 2 application, able protractor working fine e2e testing.

i run ng test , here get

angular2 karma error

i running ng test within angular2 application not initialized angular-cli. believe issue revolves around tsconfig.json how.

i have initialized angular2 application angular-cli via ng init , when run application ng test works fine, believe tsconfig issue hammerjs , other js dependencies somehow interfering.

any appreciated.

here 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: './app/test.ts', watched: false }      ],      preprocessors: {        './app/test.ts': ['angular-cli']      },      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    });  };

here package.json

{    "version": "1.0.0",    "description": "",    "main": "../wwwroot/index.html",    "scripts": {      "build:dev": "webpack --config config/webpack.dev.js --progress --profile",      "build:prod": "webpack --config config/webpack.prod.js  --progress --profile --bail",      "build": "npm run build:dev",      "server:dev:hmr": "npm run server:dev -- --inline --hot",      "server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base ui/",      "server:prod": "http-server dist --cors",      "server": "npm run server:dev",      "start:hmr": "npm run server:dev:hmr",      "start": "npm run server:dev",      "version": "npm run build",      "watch:dev:hmr": "npm run watch:dev -- --hot",      "watch:dev": "npm run build:dev -- --watch",      "watch:prod": "npm run build:prod -- --watch",      "watch:test": "npm run test -- --auto-watch --no-single-run",      "watch": "npm run watch:dev",      "webpack-dev-server": "webpack-dev-server",      "webpack": "webpack",      "lint": "tslint \"src/**/*.ts\"",      "test": "ng test",      "pree2e": "webdriver-manager update",      "e2e": "protractor"    },    "dependencies": {      "@angular/common": "~2.0.1",      "@angular/compiler": "~2.0.1",      "@angular/core": "~2.0.1",      "@angular/forms": "~2.0.1",      "@angular/http": "~2.0.1",      "@angular/material": "^2.0.0-alpha.9",      "@angular/platform-browser": "~2.0.1",      "@angular/platform-browser-dynamic": "~2.0.1",      "@angular/router": "~3.0.1",      "@angular/upgrade": "~2.0.1",      "@angularclass/conventions-loader": "^1.0.2",      "@angularclass/hmr": "~1.2.0",      "@angularclass/hmr-loader": "~3.0.2",      "@angularclass/request-idle-callback": "^1.0.7",      "@angularclass/webpack-toolkit": "^1.3.3",      "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.7",      "angular-in-memory-web-api": "~0.1.1",      "angular2-datatable": "^0.5.0",      "assets-webpack-plugin": "^3.4.0",      "bootstrap": "^4.0.0-alpha.4",      "chart.js": "^2.3.0",      "core-js": "^2.4.1",      "extract-text-webpack-plugin": "^1.0.1",      "font-awesome": "^4.6.3",      "font-awesome-webpack": "0.0.4",      "hammerjs": "^2.0.8",      "http-server": "^0.9.0",      "ie-shim": "^0.1.0",      "ng2-charts": "^1.4.0",      "rxjs": "5.0.0-beta.12",      "zone.js": "~0.6.17"    },    "devdependencies": {      "@types/hammerjs": "^2.0.33",      "@types/jasmine": "^2.2.34",      "@types/node": "^6.0.38",      "@types/source-map": "^0.1.27",      "@types/uglify-js": "^2.0.27",      "@types/webpack": "^1.12.34",      "angular-cli": "1.0.0-beta.19-3",      "angular2-template-loader": "^0.5.0",      "autoprefixer": "^6.5.0",      "awesome-typescript-loader": "^2.2.1",      "bootstrap-loader": "^2.0.0-beta.12",      "clean-webpack-plugin": "^0.1.10",      "codelyzer": "^1.0.0-beta.1",      "copy-webpack-plugin": "^3.0.1",      "css-loader": "^0.25.0",      "exports-loader": "^0.6.3",      "expose-loader": "^0.7.1",      "file-loader": "^0.9.0",      "gh-pages": "^0.11.0",      "html-webpack-plugin": "^2.21.0",      "imports-loader": "^0.6.5",      "jasmine-core": "2.4.1",      "jasmine-spec-reporter": "2.5.0",      "json-loader": "^0.5.4",      "karma": "^1.3.0",      "karma-chrome-launcher": "^2.0.0",      "karma-cli": "^1.0.1",      "karma-jasmine": "^1.0.2",      "karma-remap-istanbul": "^0.2.1",      "karma-typescript": "^2.1.0",      "karma-webpack": "^1.8.0",      "less": "^2.5.3",      "less-loader": "^2.2.1",      "node-sass": "^3.10.1",      "parse5": "^1.3.2",      "phantomjs": "^2.1.7",      "postcss-flexbugs-fixes": "^2.0.0",      "protractor": "^4.0.10",      "raw-loader": "0.5.1",      "rimraf": "^2.5.2",      "sass-loader": "^3.1.2",      "source-map-loader": "^0.1.5",      "string-replace-loader": "1.0.5",      "style-loader": "^0.13.1",      "to-string-loader": "^1.1.4",      "ts-helpers": "^1.1.2",      "ts-node": "^1.3.0",      "tslint": "3.15.1",      "tslint-loader": "^2.1.3",      "typedoc": "^0.5.1",      "typescript": "^2.0.8",      "url-loader": "^0.5.7",      "webpack": "2.1.0-beta.22",      "webpack-dev-middleware": "^1.6.1",      "webpack-dev-server": "^2.1.0-beta.2",      "webpack-md5-hash": "^0.0.5",      "webpack-merge": "^0.14.1"    }  }

here angular-cli.json

{    "project": {      "version": "1.0.0-beta.19-3",      "name": "core"    },    "apps": [      {        "root": "app",        "outdir": "dist",        "assets": [          "assets"        ],        "index": "index.html",        "main": "main.ts",        "test": "test.ts",        "tsconfig": "tsconfig.json",        "prefix": "",        "mobile": false,        "styles": [          "styles.css"        ],        "scripts": [],        "environments": {          "source": "environments/environment.ts",          "dev": "environments/environment.ts",          "prod": "environments/environment.prod.ts"        }      }    ],    "addons": [],    "packages": [],    "e2e": {      "protractor": {        "config": "./ui/protractor.conf.js"      }    },    "test": {      "karma": {        "config": "./ui/karma.conf.js"      }    },    "defaults": {      "styleext": "css",      "prefixinterfaces": false,      "inline": {        "style": false,        "template": false      },      "spec": {        "class": false,        "component": true,        "directive": true,        "module": false,        "pipe": true,        "service": true      }    }  }

here webpack.common.js

const webpack = require('webpack');  const helpers = require('./helpers');    const copywebpackplugin = require('copy-webpack-plugin');  const htmlwebpackplugin = require('html-webpack-plugin');  const forkcheckerplugin = require('awesome-typescript-loader').forkcheckerplugin;  const htmlelementsplugin = require('./html-elements-plugin');  const assetsplugin = require('assets-webpack-plugin');  const contextreplacementplugin = require('webpack/lib/contextreplacementplugin');  var provideplugin = require('webpack/lib/provideplugin');  var cleanwebpackplugin = require('clean-webpack-plugin');  const autoprefixer = require('autoprefixer');    const hmr = helpers.hasprocessflag('hot');  const metadata = {    title: 'core',    baseurl: '/',    isdevserver: helpers.iswebpackdevserver()  };    module.exports = function(options) {    isprod = options.env === 'production';    return {          metadata: metadata,            entry: {          'polyfills': './ui/polyfills.browser.ts',        'vendor': './ui/vendor.browser.ts',        'main': './ui/boot.ts'      },            resolve: {              extensions: ['', '.ts', '.js', '.json', '.scss', '.css', '.less'],        modules: [helpers.root('ui'), 'node_modules'],        },            module: {          preloaders: [          {            test: /\.ts$/,            loader: 'string-replace-loader',            query: {              search: '(system|systemjs)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)',              replace: '$1.import($3).then(mod => (mod.__esmodule && mod.default) ? mod.default : mod)',              flags: 'g'            },            include: [helpers.root('ui')]          },          ],                loaders: [          { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },          { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },                  // font definitions          //{ test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=assets/fonts/[name].[ext]' },          //{ test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=public/fonts/[name].[ext]' },          //{ test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=public/fonts/[name].[ext]' },          //{ test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=public/fonts/[name].[ext]' },          //{ test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=public/fonts/[name].[ext]' },            {            test: /\.ts$/,            loaders: [              '@angularclass/hmr-loader?pretty=' + !isprod + '&prod=' + isprod,              'awesome-typescript-loader',              'angular2-template-loader'            ],            exclude: [/\.(spec|e2e)\.ts$/]          },            {            test: /\.json$/,            loader: 'json-loader'          },            //{          //    test: /\.(eot|svg|ttf|woff|woff2)$/,          //    loader: 'file?name=[name].[ext]'          //},           { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jquery=jquery' },           //{ test: /bootstrap\/dist\/css\/umd\//, loaders: ['to-string-loader', 'css-loader'] },                    {            test: /\.css$/,            loaders: ['style','to-string-loader', 'css-loader']          },          //{          //    test: /\.scss$/,          //    exclude: /node_modules/,          //    loader: 'raw-loader!style-loader!css-loader!sass-loader'          //},          {              test: /\.scss$/,              exclude: /node_modules/,              loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader          },                    {            test: /\.html$/,            loader: 'raw-loader',            exclude: [helpers.root('ui/index.html')]          },                    {            test: /\.(jpg|png|gif)$/,            loader: 'file'          }        ],          postloaders: [          {            test: /\.js$/,            loader: 'string-replace-loader',            query: {              search: 'var sourcemappingurl = extractsourcemappingurl\\(csstext\\);',              replace: 'var sourcemappingurl = "";',              flags: 'g'            }          }        ]      },      postcss: [autoprefixer],        plugins: [              new webpack.optimize.commonschunkplugin({          name: ['polyfills', 'vendor'].reverse()        }),        new webpack.provideplugin({            jquery: 'jquery',            $: 'jquery',            jquery: 'jquery',            "window.tether": 'tether',            'window.jquery': 'jquery',            'window.$': 'jquery',        }),           //new provideplugin({         //    jquery: 'jquery',         //    $: 'jquery',         //    jquery: 'jquery',         //    "window.tether": 'tether'         //}),        new contextreplacementplugin(          // (\\|\/) piece accounts path separators in *nix , windows          /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,          helpers.root('ui') // location of src        ),          new cleanwebpackplugin(                  [                      './wwwroot/dist',                      //'./wwwroot',                  ]              ),                new copywebpackplugin([{            from: 'ui/assets',          to: 'assets'        }]),          new htmlwebpackplugin({            template: 'ui/index.html',          chunkssortmode: 'dependency'        }),                new htmlelementsplugin({          headtags: require('./head-config.common')        }),        ],      };  }

here tsconfig.json

{    "compileroptions": {      "target": "es5",      "module": "commonjs",      "moduleresolution": "node",      "emitdecoratormetadata": true,      "experimentaldecorators": true,      "allowsyntheticdefaultimports": true,      "sourcemap": true,      "noemithelpers": true,      "strictnullchecks": false,      "baseurl": "./ui",      "paths": {},      "lib": [        "dom",        "es6"      ],      "types": [        "hammerjs",              "node",              "source-map",        "uglify-js",        "webpack"      ]    },    "exclude": [      "node_modules",      "dist"    ],    "awesometypescriptloaderoptions": {      "forkchecker": true,      "usewebpacktext": true    },    "compileonsave": false,    "buildonsave": false,    "atom": { "rewritetsconfig": false }  }

here test.ts

import '../polyfills.browser.ts';    import 'zone.js/dist/long-stack-trace-zone';  import 'zone.js/dist/proxy.js';  import 'zone.js/dist/sync-test';  import 'zone.js/dist/jasmine-patch';  import 'zone.js/dist/async-test';  import 'zone.js/dist/fake-async-test';    // unfortunately there's no typing `__karma__` variable. declare any.  declare var __karma__: any;  declare var require: any;    // prevent karma running prematurely.  __karma__.loaded = function () {};      promise.all([    system.import('@angular/core/testing'),    system.import('@angular/platform-browser-dynamic/testing')  ])    // first, initialize angular testing environment.    .then(([testing, testingbrowser]) => {      testing.gettestbed().inittestenvironment(        testingbrowser.browserdynamictestingmodule,        testingbrowser.platformbrowserdynamictesting()      );    })    // find tests.    .then(() => require.context('./', true, /\.spec\.ts/))    // , load modules.    .then(context => context.keys().map(context))    // finally, start karma run tests.    .then(__karma__.start, __karma__.error);

here polyfil.browsers.ts

// todo(gdi2290): switch dlls    // polyfills    // import 'ie-shim'; // internet explorer 9 support      // import 'core-js/es6';  // added parts of es6 necessary project or browser support requirements.  import 'core-js/es6/symbol';  import 'core-js/es6/object';  import 'core-js/es6/function';  import 'core-js/es6/parse-int';  import 'core-js/es6/parse-float';  import 'core-js/es6/number';  import 'core-js/es6/math';  import 'core-js/es6/string';  import 'core-js/es6/date';  import 'core-js/es6/array';  import 'core-js/es6/regexp';  import 'core-js/es6/map';  import 'core-js/es6/set';  import 'core-js/es6/weak-map';  import 'core-js/es6/weak-set';  import 'core-js/es6/typed';  import 'core-js/es6/reflect';  // see issue https://github.com/angularclass/angular2-webpack-starter/issues/709  // import 'core-js/es6/promise';    import 'core-js/es7/reflect';  import 'zone.js/dist/zone';    // typescript emit helpers polyfill  import 'ts-helpers';    if ('production' === env) {    // production      } else {    // development      error.stacktracelimit = infinity;      require('zone.js/dist/long-stack-trace-zone');    }