jasmine html loader is not loading in angular 4 webpack

Question

I am trying to unit test my angular app.as am new to this karama test i am trying to karma,jasmine and protractor..i ve downloaded and all karma dependencies.i am using angular webpack version in visual studio 2017.i am facing some issues like

 

1.karma html loader is not loading,only i can see karma v1.7.0 is connected,while debugging am getting module error in karma browser but application works fine

 

2.i have done a component testing but its showing error..in CLI version its working

 

3.i ve downloaded protractor do i need to add protractor.js manually?

 

4.How to configure karma in webpack version to get html view

 

my pakage.json

{

"name": "EfficiencyClassWebApp",

"private": true,

"version": "0.0.0",

"scripts": {

"test": "karma start ClientApp/test/karma.conf.js"

},

"dependencies": {

"@angular/animations": "4.2.5",

"@angular/common": "4.2.5",

"@angular/compiler": "4.2.5",

"@angular/compiler-cli": "4.2.5",

"@angular/core": "4.2.5",

"@angular/forms": "4.2.5",

"@angular/http": "4.2.5",

"@angular/platform-browser": "4.2.5",

"@angular/platform-browser-dynamic": "4.2.5",

"@angular/platform-server": "4.2.5",

"@angular/router": "4.2.5",

"@ngtools/webpack": "1.5.0",

"@types/webpack-env": "1.13.0",

"angular2-template-loader": "0.6.2",

"aspnet-prerendering": "^3.0.1",

"aspnet-webpack": "^2.0.1",

"awesome-typescript-loader": "3.2.1",

"bootstrap": "3.3.7",

"css": "2.2.1",

w"css-loader": "0.28.4",

"csvtojson": "^1.1.9",

"es6-shim": "0.35.3",

"event-source-polyfill": "0.0.9",

"expose-loader": "0.7.3",

"extract-text-webpack-plugin": "2.1.2",

"file-loader": "0.11.2",

"html-loader": "0.4.5",

"isomorphic-fetch": "2.2.1",

"jquery": "3.2.1",

"json-loader": "0.5.4",

"ngx-papaparse": "^1.2.5",

"preboot": "4.5.2",

"primeng": "^5.0.0",

"raw-loader": "0.5.1",

"reflect-metadata": "0.1.10",

"rxjs": "5.4.2",

"style-loader": "0.18.2",

"to-string-loader": "1.1.5",

"toastr-ng2": "^4.1.1",

"typescript": "2.4.1",

"url-loader": "0.5.9",

"web-animations-js": "^2.3.1",

"webpack": "2.5.1",

"webpack-hot-middleware": "2.18.2",

"webpack-merge": "4.1.0",

"zone.js": "0.8.12"

},

"devDependencies": {

"@types/chai": "4.0.1",

"@types/jasmine": "2.5.53",

"@types/rx": "^4.1.1",

"chai": "4.0.2",

"jasmine-core": "2.6.4",

"karma": "1.7.0",

"karma-chai": "0.1.0",

"karma-chrome-launcher": "2.2.0",

"karma-cli": "1.0.1",

"karma-jasmine": "1.1.0",

"karma-webpack": "2.0.3",

"protractor-webpack": "^1.1.0",

"webpack": "1.13.1",

"html-loader": "0.4.3",

"babel-loader": "5.3.2",

"html-webpack-plugin": "1.6.1",

"rimraf": "^2.5.3",

"run-sequence": "1.1.2",

"karma-coverage": "^0.5.3",

"loader-utils": "^0.2.12",

"karma-jasmine-html-reporter": "^0.2.2",

"karma-mocha-reporter": "^2.2.2",

"karma-remap-istanbul": "^0.6.0"

}

}

 

karma.config.js

 

module.exports = function (config) {

config.set({

basePath: '.',

frameworks: ['jasmine'],

files: [

'../../wwwroot/dist/vendor.js',

'./boot-tests.ts'

],

preprocessors: {

'./boot-tests.ts': ['webpack']

},

reporters: ['progress'],

port: 9876,

colors: true,

logLevel: config.LOG_INFO,

autoWatch: true,

browsers: ['Chrome'],

mime: { 'application/javascript': ['ts','tsx'] },

singleRun: false,

webpack: require('../../webpack.config.js')().filter(config =>

config.target !== 'node'), // Test against client bundle, because

 

tests run in a browser

 

webpackMiddleware: { stats: 'errors-only' }

});

};

 

my spec.ts/component test

 

import { async, ComponentFixture, TestBed } from

'@angular/core/testing';

import { } from 'jasmine';

import { ManageMarketComponent } from './marketdetails.component';

describe('ManageMarketComponent', () => {

let component: ManageMarketComponent;

let fixture: ComponentFixture<ManageMarketComponent>;

beforeEach(async(() => {

TestBed.configureTestingModule({

declarations: [ManageMarketComponent]

})

.compileComponents();

}));

beforeEach(() => {

fixture = TestBed.createComponent(ManageMarketComponent);

component = fixture.componentInstance;

fixture.detectChanges();

});

it('ManageMarketComponent is created ', () => {

expect(component).toBeTruthy();

});

});