title: Uncaught Error: Module parse failed:You may need an appropriate loader to handle this file type
body: <p>I caught this error when run karma test.</p>
  
  <blockquote>
    <p>Uncaught Error: Module parse failed: G:\demo\my-ng2-admin\my-ng2-admin\my-ng2-admin\node_modules\awesome-typescript-loader\dist\entry.js?{"configFileName":"G:\demo\my-ng2-admin\my-ng2-admin\my-ng2-admin\src\tsconfig.json"}!G:\demo\my-ng2-admin\my-ng2-admin\my-ng2-admin\node_modules\angular2-template-loader\index.js!G:\demo\my-ng2-admin\my-ng2-admin\my-ng2-admin\src\app\pages\test\components\testBanner.component.spec.ts Unexpected token (18:27)</p>
  </blockquote>
  
  <hr>
  
  <pre><code> You may need an appropriate loader to handle this file type.
    |     var de;
    |     var el;
    |     beforeEach(function () __awaiter(this, void 0, void 0, function* () {
    |         testing_1.TestBed.configureTestingModule({
    |             declarations: [testBanner_component_1.testBanner]
  </code></pre>
  
  <p>and more details</p>
  
  <pre><code>//webpack.test.js
  var webpack = require('webpack');
  var helpers = require('./config/helpers');
  
  module.exports = {
    devtool: 'inline-source-map',
  
    resolve: {
      extensions: ['.ts', '.js']
    },
  
    entry: {
    },
    // entry: {
    //
    //   'polyfills': './src/polyfills.browser.ts',
    //   'vendor': './src/vendor.browser.ts',
    //   'main': './src/main.browser.ts'
    //
    // },
  
    module: {
      rules: [
        {
          test: /\.ts$/,
          loaders: [
            {
              loader: 'awesome-typescript-loader',
              options: { configFileName: helpers.root('src', 'tsconfig.json') }
            }, 'angular2-template-loader'
          ]
        },
        {
          test: /\.html$/,
          loader: 'html-loader'
  
        },
        {
          test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
          loader: 'null-loader'
        },
        {
          test: /\.css$/,
          exclude: helpers.root('src', 'app'),
          loader: 'null-loader'
        },
        {
          test: /\.css$/,
          include: helpers.root('src', 'app'),
          loader: 'raw-loader'
        }
      ]
    },
  
    plugins: [
      new webpack.ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        helpers.root('./src'), // location of your src
        {} // a map of your routes
      )
    ]
  }
  </code></pre>
  
  <hr>
  
  <pre><code>//karma.conf.js
  var webpackConfig = require('./webpack.test');
  module.exports = function(config) {
    config.set({
      // base path that will be used to resolve all patterns (eg. files, exclude)
      basePath: '',
      // frameworks to use
      // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
      frameworks: ['jasmine'],
      // list of files / patterns to load in the browser
      files: [
        {pattern: './karma-shim.js', watched: false}
        ],
  
      // list of files to exclude
      exclude: [
      ],
      // preprocess matching files before serving them to the browser
      // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
      preprocessors: {
        './karma-shim.js': ['webpack']
      },
      webpack: webpackConfig,
      webpackMiddleware: {
        stats: 'errors-only'
      },
  
      webpackServer: {
        noInfo: true
      },
      plugins:[
        'karma-jasmine',
        'karma-chrome-launcher',
        //'karma-sourcemap-loader',
        require("karma-webpack")
      ],
      proxies:{
        //http://localhost:3000/#/pages/strategys/strategytables
        "/app/": "base/src/app"
      },
      // test results reporter to use
      // possible values: 'dots', 'progress'
      // available reporters: https://npmjs.org/browse/keyword/karma-reporter
      reporters: ['progress'],
      // web server port
      port: 9876,
  
      // enable / disable colors in the output (reporters and logs)
      colors: true,
      // level of logging
      // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
      logLevel: config.LOG_INFO,
  
      // enable / disable watching file and executing tests whenever any file changes
      autoWatch: true,
  
      // start these browsers
      // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
      browsers: ['Chrome'],
  
      // Continuous Integration mode
      // if true, Karma captures browsers, runs the tests and exits
      singleRun: false,
  
      // Concurrency level
     // how many browser should be started simultaneous
      concurrency: Infinity
    })
  }
  </code></pre>
  
  <hr>
  
  <pre><code>//karma-shim.js
  Error.stackTraceLimit = Infinity;
  
  require('core-js/es6');
  require('core-js/es7/reflect');
  
  require('zone.js/dist/zone');
  require('zone.js/dist/long-stack-trace-zone');
  require('zone.js/dist/proxy');
  require('zone.js/dist/sync-test');
  require('zone.js/dist/jasmine-patch');
  require('zone.js/dist/async-test');
  require('zone.js/dist/fake-async-test');
  
  var appContext = require.context('./src', true, /\.spec\.ts/);
  
  appContext.keys().forEach(appContext);
  
  var testing = require('@angular/core/testing');
  var browser = require('@angular/platform-browser-dynamic/testing');
  
  testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule,
    browser.platformBrowserDynamicTesting());
  </code></pre>
  
  <hr>
  
  <pre><code>//testBanner.component.spec.ts
  import {} from "@types/jasmine";
  import {ComponentFixture, TestBed, ComponentFixtureAutoDetect,async} from"@angular/core/testing";
  import { By }              from "@angular/platform-browser";
  import { DebugElement }    from "@angular/core";
  
  import { testBanner } from "./testBanner.component";
  
  describe('bannerComponent test',()=&gt; {
    var comp:testBanner;
    var fixture:ComponentFixture&lt;testBanner&gt;;
    var de: DebugElement;
    var el: HTMLElement;
  
    beforeEach(async()=&gt;{
      TestBed.configureTestingModule({
        declarations:[testBanner],
      }).compileComponents();
  
      beforeEach(()=&gt;{
        fixture = TestBed.createComponent(testBanner);
  
        comp = fixture.componentInstance;
  
        de = fixture.debugElement.query(By.css('h1'));
  
        el = de.nativeElement;
      });
  
    });
  
    it('should display original title', () =&gt; {
      fixture.detectChanges();
      expect(el.textContent).toContain(comp.title);
    });
  
    it('should display a different test title', () =&gt; {
      comp.title = 'Test Title';
      fixture.detectChanges();
      expect(el.textContent).toContain('Test Title');
    });
  
  });
  </code></pre>