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

Posted 2023-03-22

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

【英文标题】：Uncaught Error: Module parse failed:You may need an appropriate loader to handle this file type

【发布时间】：2017-10-22 18:52:59

【问题描述】：

我在运行业力测试时发现了这个错误。

未捕获的错误：模块解析失败：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 意外令牌 (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]

还有更多细节

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

);

【参考方案1】：

这对遇到此问题的人会有所帮助。

您需要在webpack.test.js（webpack 配置文件）中添加以下更改：

尝试像这样更新加载器'awesome-typescript-loader'：

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

应该可以解决你的问题。