Karma 错误 - 模块解析失败，意外字符'

Question

谁能告诉我为什么会出现这个错误：

 Uncaught Error: Module parse failed: app\src\app\css\fonts\roboto-300-latin.woff2 
 Unexpected character ' ' (1:4)
 You may need an appropriate loader to handle this file type.
 (Source code omitted for this binary file)
 at unit_tests/index.js:138633


npm ERR! Test failed.  See above for more details.

我的业力配置：

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config) {
  config.set({
     basePath: '',
     frameworks: ['jasmine'],
     plugins: [
        require('karma-jasmine'),
        require("karma-webpack"),
        require('karma-chrome-launcher'),
        require('karma-sourcemap-loader'),
        require('karma-jasmine-html-reporter'),
        require('karma-coverage-istanbul-reporter'),
        require('@angular/cli/plugins/karma'),
         'karma-*'
       ],
      client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
      },
     files: [
       'unit_tests/index.js'
     ],
     preprocessors: {
       'unit_tests/index.js': ['webpack', 'sourcemap']
     },
     webpack: {
        resolve: {
          extensions: ['.ts', '.js', '.jsx'],
          alias: {
             components: 'components',
             services: 'services'
          }
         }, 
       module: {
       rules: [{
        test: /\.ts$/,
        loaders: [
          'awesome-typescript-loader',
          'angular2-template-loader'
        ]
      },
      {
        test: /\.scss$/,
        loaders: [
          'style-loader',
          'css-loader',
          'sass-loader'
         ],
        // exclude: [helpers.root('src/index.html')]
      },
      {
        test: /\.html$/,
        loader: 'raw-loader'
      }
    ]
  },
   devtool: 'inline-source-map'
  },
   reporters: ['progress'],
   port: 9876,
   colors: true,
   logLevel: config.LOG_INFO,
   autoWatch: true,
   browsers: ['Chrome'],
   singleRun: true,
   concurrency: Infinity
  });
};

我的规格文件：

import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { RouterModule, Router } from '@angular/router';
import { MaterialModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AuthHttp, AuthConfig, AUTH_PROVIDERS, provideAuth, tokenNotExpired 
} from 'angular2-jwt';
import { AppModule } from '../../../src/app/app.module';
import { } from 'jasmine';

import { FirmService } from '../../../src/app/containers/dashboard/services/firm.service';
import { FirmListComponent } from '../../../src/app/containers/dashboard/firm-list/firm-list.component';

describe('Firm List Component', () => {
let component;
let fixture;
let de: DebugElement;
let el: HTMLElement;
let de2: DebugElement;
let el2: HTMLElement;

let mockRouter: any;
    class MockRouter {
       public navigate = jasmine.createSpy('navigate');
   }

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [MaterialModule, FormsModule, AppModule],
        declarations: [FirmListComponent],
        providers: [FirmService]
    })
        .compileComponents()
        .then(() => {
            fixture = TestBed.createComponent(FirmListComponent);
            component = fixture.componentInstance;
        });
}));

it('should have a defined component', () => {
    expect(component).toBeDefined();
  });
});

我在尝试导入 AppModule 时收到此错误。我想导入它，而不必分别导入一堆不同的服务和配置。感谢您的帮助

Answer 1

您有错误，因为没有加载器或转换器可以转换您的字体文件。首先你必须安装文件加载器

npm install --save-dev file-loader

然后将此对象添加到规则数组。它告诉 webpack 当你找到这些类型的字体文件时，用 file-loader 转换它们

{
        test: /\.(svg|eot|ttf|woff|woff2)$/,
        use:'file-loader'

}

你的业力配置的最终形式可以是

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config) {
  config.set({
     basePath: '',
     frameworks: ['jasmine'],
     plugins: [
        require('karma-jasmine'),
        require("karma-webpack"),
        require('karma-chrome-launcher'),
        require('karma-sourcemap-loader'),
        require('karma-jasmine-html-reporter'),
        require('karma-coverage-istanbul-reporter'),
        require('@angular/cli/plugins/karma'),
         'karma-*'
       ],
      client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
      },
     files: [
       'unit_tests/index.js'
     ],
     preprocessors: {
       'unit_tests/index.js': ['webpack', 'sourcemap']
     },
     webpack: {
        resolve: {
          extensions: ['.ts', '.js', '.jsx'],
          alias: {
             components: 'components',
             services: 'services'
          }
         }, 
       module: {
       rules: [{
        test: /\.(svg|eot|ttf|woff|woff2)$/,
        use:'file-loader'

        },{
        test: /\.ts$/,
        loaders: [
          'awesome-typescript-loader',
          'angular2-template-loader'
        ]
      },
      {
        test: /\.scss$/,
        loaders: [
          'style-loader',
          'css-loader',
          'sass-loader'
         ],
        // exclude: [helpers.root('src/index.html')]
      },
      {
        test: /\.html$/,
        loader: 'raw-loader'
      }
    ]
  },
   devtool: 'inline-source-map'
  },
   reporters: ['progress'],
   port: 9876,
   colors: true,
   logLevel: config.LOG_INFO,
   autoWatch: true,
   browsers: ['Chrome'],
   singleRun: true,
   concurrency: Infinity
  });
};