本文介绍了未捕获的错误:模块解析失败:您可能需要适当的加载器来处理此文件类型的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
运行业力测试时发现了此错误.
I caught this error when run karma test.
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');
});
});
推荐答案
这对遇到此问题的人很有帮助.
This can be helpful for someone who came across this question.
您需要在webpack.test.js
(Webpack配置文件)中添加以下更改:
You need to add following change in your webpack.test.js
(webpack config file):
尝试像这样更新加载程序"awesome-typescript-loader":
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.
这篇关于未捕获的错误:模块解析失败:您可能需要适当的加载器来处理此文件类型的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!