カルマエラー - 私はこのエラーを取得していますなぜモジュールの解析が失敗し、予期しない文字 '

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

マイspecファイル：

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

のためにさまざまなサービスとのconfigsのseparately.Thanksの束をインポートするのではなくそれをインポートしたいです。そのためにまず、あなたは、規則配列にこのオブジェクトを追加し、ファイル・ローダーに

npm install --save-dev file-loader

をインストールする必要があります。その占いのWebPACKを使用すると、フォントファイルのこれらのタイプを見つけるときに、ファイル・ローダーでそれらを変換すること

{ 
     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 
    }); 
};