未捕获的错误：模块解析失败：您可能需要合适的加载程序来处理此文件类型

Question

I caught this error when run karma test.

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)

---

 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]

and more details

//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
    )
  ]
}

---

//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
  })
}

---

//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());

---

//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',()=> {
  var comp:testBanner;
  var fixture:ComponentFixture<testBanner>;
  var de: DebugElement;
  var el: HTMLElement;

  beforeEach(async()=>{
    TestBed.configureTestingModule({
      declarations:[testBanner],
    }).compileComponents();

    beforeEach(()=>{
      fixture = TestBed.createComponent(testBanner);

      comp = fixture.componentInstance;

      de = fixture.debugElement.query(By.css('h1'));

      el = de.nativeElement;
    });

  });

  it('should display original title', () => {
    fixture.detectChanges();
    expect(el.textContent).toContain(comp.title);
  });

  it('should display a different test title', () => {
    comp.title = 'Test Title';
    fixture.detectChanges();
    expect(el.textContent).toContain('Test Title');
  });

});

Answer 1

This can be helpful for someone who came across this question.

You need to add following change in your webpack.test.js (webpack config file):

try updating loader 'awesome-typescript-loader' like this:

{
   loader: 'awesome-typescript-loader?presets[]=es2017',
   options: { configFileName: helpers.root('src', 'tsconfig.json') }
}

It should solve your problem.