angular - Angular4 + Webpack + Karma: unexpected '@component' -

i migrating angular v4.0.0 , decided time proper testbed. followed blog post: https://medium.com/@laco0416/setting-up-angular-2-testing-environment-with-karma-and-webpack-e9b833befd99

however, when try run actual angular test (i.e. uses angular components) confronted following error: uncaught error: module parse failed: /mnt/dev/1-nodeworkspace/toolwatch/tw-core/src/pipes/arethmetic-sign.pipe.spec.ts unexpected character '@' (4:0) match @component({.

i don't understand doing wrong here.

the repo here: https://github.com/toolwatchapp/tw-core/tree/testbed , here hare files:

tsconfig.json

{ "compileroptions": {     "declaration": false,     "emitdecoratormetadata": true,     "experimentaldecorators": true,     "module": "es2015",     "moduleresolution": "node",     "noemitonerror": true,     "noimplicitany": false,     "sourcemap": true,     "target": "es5",          // typeroots option has been configured     "typeroots": [       // add path @types       "node_modules/@types"     ],      "types": [             "node",             "jasmine"      ]   },   "files" : [     "index.ts",     "tw-core.ts",     "./src/services/twapi.service.ts",     "./src/services/ga.service.ts",     "./src/pipes/arethmetic-sign.pipe.ts",     "./src/pipes/leading-zero.pipe.ts",     "./src/pipes/k-formatter.pipe.ts",     "./src/models/watch.model.ts",     "./src/models/user.model.ts",     "./src/models/measure.model.ts",     "./src/models/blog-post.model.ts",     "./src/models/model.factory.ts",     "./src/helpers/string.helper.ts",     "./src/directives/clock/clock.component.ts",     "./src/directives/clock/moon-phases/moon-phases.component.ts",     "./src/directives/login/login.component.ts",     "./src/directives/signup/signup.component.ts",     "./src/directives/watch/watch.component.ts"   ],   "include": [     "/node_modules/"   ],   "exclude": [     "/bundles"   ],   "angularcompileroptions": {     "strictmetadataemit": true,     "skiptemplatecodegen": true   },   "awesometypescriptloaderoptions": {         "usewebpacktext": true     } } 

webpack.config.json

/**  * adapted angular2-webpack-starter  */  const helpers = require('./config/helpers'),     webpack = require('webpack');  /**  * webpack plugins  */ const provideplugin = require('webpack/lib/provideplugin'); const defineplugin = require('webpack/lib/defineplugin'); const loaderoptionsplugin = require('webpack/lib/loaderoptionsplugin');  module.exports = {     devtool: 'inline-source-map', resolve: {     extensions: ['.ts', '.js'] },  entry: helpers.root('tw-core.ts'),  output: {     path: helpers.root('bundles'),     publicpath: '/',     filename: 'tw-core.umd.js',     librarytarget: 'umd',     library: 'tw-core' },  // require dependencies don't bundle them externals: [/^\@angular\//, /^rxjs\//],  module: {     rules: [     /*{         enforce: 'pre',         test: /\.ts$/,         loader: 'tslint-loader',         exclude: [helpers.root('node_modules')]     }, */     {         test: /\.ts$/,         loader: 'awesome-typescript-loader?declaration=false',         exclude: [/\.e2e\.ts$/]     }] },  plugins: [     // fix warning in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js     new webpack.contextreplacementplugin(         /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,         helpers.root('./src')     ),     /*new webpack.loaderoptionsplugin({         options: {             tslintloader: {                 emiterrors: false,                 failonhint: false             }         }     })*/ ] 

};

karma.conf.js

module.exports = function (config) {   config.set({     basepath: '',     frameworks: ['jasmine'],     files: [       { pattern: 'test/main.js', watched: false }     ],     exclude: [     ],     customlaunchers: {           chrome_travis_ci: {               base: 'chrome',               flags: ['--no-sandbox']           }     },     preprocessors: {       'test/main.js': ['webpack', 'sourcemap']     },     webpack: {       devtool: 'inline-source-map'     },     reporters: ['progress'],     port: 9876,     colors: true,     loglevel: config.log_info,     autowatch: false,     browsers: ['chrome_travis_ci'],     singlerun: true,     concurrency: infinity   }) } 

main.spec.ts

import 'core-js'; // es6 + reflect-metadata // zone.js import 'zone.js/dist/zone'; import 'zone.js/dist/proxy'; import 'zone.js/dist/sync-test'; import 'zone.js/dist/async-test'; import 'zone.js/dist/jasmine-patch'; // testbed initialization import { testbed } '@angular/core/testing'; import {     browserdynamictestingmodule,     platformbrowserdynamictesting, } '@angular/platform-browser-dynamic/testing'; testbed.inittestenvironment(     browserdynamictestingmodule,     platformbrowserdynamictesting() );   require('./pipes/arethmetic-sign.pipe.spec.ts'); 

arethmetic-sign.pipe.spec.ts

import { component } '@angular/core'; import { testbed, async } '@angular/core/testing'; import { arethmeticsign } './arethmetic-sign.pipe'; @component({     selector: 'test',     template: `     <p>{{ text | echo }}</p>     ` }) class testcomponent {     text: string; } describe('echopipe', () => { beforeeach(() => {         testbed.configuretestingmodule({             declarations: [testcomponent, arethmeticsign]         });     }); beforeeach(async(() => {         testbed.compilecomponents();     })); it('works well', async(() => {         const fixture = testbed.createcomponent(testcomponent);         fixture.componentinstance.text = '3.0';         fixture.detectchanges();         const el = fixture.debugelement.nativeelement htmlelement;          expect(el.queryselector('p').textcontent).tobe('+3.0');     })); });