ERROR when trying to run karma test - google-chrome

Question

I am having problems to setup karma with Angular 5.2.0 (without Cli)
The Angular application is working, but the problem is with karma, when I try to run the test i get this ERROR:
karma start
Hash: ccc4545dd1d9416a823b
Version: webpack 3.10.0
Time: 58ms
webpack: Compiled successfully.
13 01 2018 15:34:59.123:WARN [karma]: No captured browser, open http://localhost:9876/
13 01 2018 15:34:59.134:INFO [karma]: Karma v2.0.0 server started at http://0.0.0.0:9876/
13 01 2018 15:34:59.136:INFO [launcher]: Launching browser Chrome with unlimited concurrency
13 01 2018 15:34:59.147:INFO [launcher]: Starting browser Chrome
13 01 2018 15:35:00.726:INFO [Chrome 63.0.3239 (Windows 10 0.0.0)]: Connected on socket 37NRWsbdgw5x2CTBAAAA with id 42149942
Chrome 63.0.3239 (Windows 10 0.0.0) ERROR
{
"message": "Uncaught SyntaxError: Unexpected token {\nat src/app/app.component.spec.ts:2:8\n\nSyntaxError: Unexpected token {",
"str": "Uncaught SyntaxError: Unexpected token {\nat src/app/app.component.spec.ts:2:8\n\nSyntaxError: Unexpected token {"
}
First I got that ERROR with video/mp2t so I added the MIME fix. And now I got the above ERROR. It seems that karma is not resolving the TS or something, because I have tested the .spec.ts file with just one import and still get the same error.
app.component.spec.ts
import { TestBed, async } from '#angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it('should display the header text "Welcome to Momentz4Ever"', async(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to Momentz4Ever');
}));
});
tsconfig.ts
{
"compileOnSave": false,
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": true,
"baseUrl": "src",
"outDir": "./dist",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2016",
"dom"
],
"types": [
"node",
"jasmine"
]
},
"awesomeTypeScriptLoaderOptions": {
"useWebpackText": true
}
}
webpack.config.ts
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ContextReplacementPlugin } = require('webpack');
module.exports = {
entry: {
main: './src/index.ts'
},
output: {
path: path.join(__dirname, "../dist/"),
filename: "[name].bundle.js",
},
resolve: {
extensions: ['.js', '.ts', '.html']
},
devServer: {
contentBase: path.join(__dirname, "../dist/"),
port: 9000
},
devtool: 'inline-source-map',
module: {
loaders: [
{ test: /.ts$/, use: ['awesome-typescript-loader', 'angular2-template-loader'] },
{ test: /.html$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
showErrors: true,
title: "Webpack App",
path: path.join(__dirname, "../dist/"),
hash: true
}),
new ContextReplacementPlugin(
/\#angular(\\|\/)core(\\|\/)esm5/,
path.resolve(__dirname, 'src')
)
]
}
karma.conf.ts
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
{ pattern: './src/app/app.component.spec.ts' }
],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-webpack'),
require('karma-sourcemap-loader'),
],
preprocessors: {
'./src/test.ts': ['webpack', 'sourcemap']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
}
package.json
{
"name": "",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "karma start",
"build": "webpack-dev-server --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "^5.2.0",
"#angular/http": "^5.2.0",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"core-js": "^2.5.3",
"rxjs": "^5.5.6",
"zone.js": "^0.8.20"
},
"devDependencies": {
"#types/jasmine": "^2.8.4",
"#types/node": "^9.3.0",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.4.1",
"css-loader": "^0.28.8",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.30.1",
"jasmine": "^2.8.0",
"jasmine-core": "^2.8.0",
"karma": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-typescript": "^3.0.9",
"karma-webpack": "^2.0.9",
"node-sass": "^4.7.2",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"ts-loader": "^3.2.0",
"tslint": "^5.9.1",
"typescript": "^2.6.2",
"url-loader": "^0.6.2",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.10.1"
}
}