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

 

What I have tried:

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",
"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();
});
});