未知のエラー：不一致の匿名define（）モジュールハイブリッド角型Webpackカルマ

Question

私はプロジェクトに単体テストを追加しようとしています。コンテキストの場合、これはハイブリッド角度1 /角度4のアプリです。これの角度4の部分は、角度cliで構築されました。私は、パスsrc/app-ng/appにある角度4のコードでカルマ/ジャスミンを実行することにのみ関心があります。スペックファイルのすべては、カルマが起動するときにjavascriptに変換されるファイルタイプコピー*.spec.tsです。

最新のエラーUncaught Error: Mismatched anonymous define()で敗北しました。 docsを読んでから、このエラーの4つの識別原因があります。これらの理由の

1. Be sure to load all scripts that call define() via the RequireJS API. Do not manually code script tags in HTML to load scripts that have define() calls in them.

2. If you manually code an HTML script tag, be sure it only includes named modules, and that an anonymous module that will have the same name as one of the modules in that file is not loaded.

3. If the problem is the use of loader plugins or anonymous modules but the RequireJS optimizer is not used for file bundling, use the RequireJS optimizer.

4. If the problem is the var define lint approach, use /*global define / (no space before "global") comment style instead.

どれも私には適用されているように見えるんが、私はそれをされないことがあります。私はindex.htmlにこのスクリプトタグを持っていますが、削除しようとしましたが、それは役に立たなかった。 <script src="//use.typekit.net/atv1krw.js"></script> <script>try { Typekit.load({async: true}); } catch (e) { }</script>

皆さんの洞察力に感謝し、役立つ場合はもっとコードを共有していただければ幸いです。私はテストmain.jsを追加：karma start ./karma.conf.js

EDITから

karma.conf.js

module.exports = function(config) { 
    config.set({ 
    basePath: '', 
    frameworks: ['jasmine', 'requirejs'], 
    files: [ 
     'src/app-ng/app/home/home.component.spec.ts', 
     { pattern: 'node_modules/@angular/**/*.js', included: false, watched: true }, 
     { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: true }, 
     'test-main.js' 
    ], 
    exclude: [ 
    ], 
    preprocessors: { 
     '**/*.ts': ['typescript'] 
    }, 
    typescriptPreprocessor: { 
     options: { 
     sourceMap: false, 
     target: 'ES5', 
     module: 'amd', 
     noImplicitAny: false, 
     noResolve: true, 
     removeComments: true, 
     concatenateOutput: false 
     }, 
     transformPath: function(path) { 
     return path.replace(/\.ts$/, '.js'); 
     } 
    }, 
    reporters: ['progress'], 
    port: 9876, 
    colors: true, 
    logLevel: config.LOG_INFO, 
    autoWatch: true, 
    browsers: ['Chrome'], 
    plugins: [ 
     'karma-requirejs' 
    ], 
    singleRun: false, 
    concurrency: Infinity, 
    mime: { 
     'text/x-typescript': ['ts','tsx'] 
    } 
    }) 
} 

home.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { HomeComponent } from './home.component'; 

describe('HomeComponent',() => { 
    let component: HomeComponent; 
    let fixture: ComponentFixture<HomeComponent>; 

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

    beforeEach(() => { 
    fixture = TestBed.createComponent(HomeComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    }); 

    it('should create',() => { 
    expect(component).toBeTruthy(); 
    }); 
}); 

結果その答えに応じて：

var tests = []; 
for (var file in window.__karma__.files) { 
    if (window.__karma__.files.hasOwnProperty(file)) { 
    if (/spec\.js$/.test(file)) { 
     tests.push(file); 
    } 
    } 
} 

requirejs.config({ 
    // Karma serves files from '/base' 
    baseUrl: '/base/src', 

    paths: { 
     'jquery': '../lib/jquery', 
     'underscore': '../lib/underscore', 
    }, 

    shim: { 
     'underscore': { 
      exports: '_' 
     } 
    }, 

    // ask Require.js to load these files (all our tests) 
    deps: tests, 

    // start test run, once Require.js is done 
    callback: window.__karma__.start 
}); 

エラーは今です：

Answer 1

は、あなたのテストファイルを含まないようにカルマを教える：

files: [ 
     { pattern: 'src/app-ng/app/home/home.component.spec.ts', included: false }, 
     'test-main.js' 
    ], 

あなたは活字体を通じてAMDモジュールにコンパイルされるようにそれを設定しました。デフォルトでは、filesに含まれるファイルは、script要素を介してロードされます。あなたが発見したように、script要素でAMDモジュールを読み込むことはできません。 included: falseを使用するとカルマはファイルを提供するが、script要素は生成されません。代わりに、RequireJSを使用してモジュールをロードします。カルマの文書explainsのように、あなたのテストを含むモジュールのロードを開始するのはtest-main.jsの仕事です。したがって、あなたのfilesにリストアップされ、script要素でロードされなければなりません。