Webpack Karma無法在.spec中加載angular2組件

Question

配置-

    "webpack": "1.12.11",
    "@types/jasmine": "2.5.41",
    "typescript": "2.0.10",
    "awesome-typescript-loader": "^2.2.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.1.0",
    "karma-sourcemap-writer": "^0.1.2",
    "karma-spec-reporter": "0.0.26",
    "karma-mocha": "^0.2.0",
    "karma-mocha-reporter": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.4",
    "karma-webpack": "^1.5.1",

karma.conf

module.exports = function (config) {
  config.set({
    // base path used to resolve all patterns
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],

    resolve: {
        extensions: ['.js', '.ts', '.html']
    },

    // list of files/patterns to load in the browser
    files: [ 
     // Polyfills
          'node_modules/core-js/client/shim.js',
          // 'node_modules/reflect-metadata/Reflect.js',

          // zone.js
          'node_modules/zone.js/dist/zone.js',
          'node_modules/zone.js/dist/long-stack-trace-zone.js',
          'node_modules/zone.js/dist/proxy.js',
          'node_modules/zone.js/dist/sync-test.js',
          'node_modules/zone.js/dist/jasmine-patch.js',
          'node_modules/zone.js/dist/async-test.js',
          'node_modules/zone.js/dist/fake-async-test.js',

          // RxJs
          { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
          { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },

          // Paths loaded via module imports:
          // Angular itself
          {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
          {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},

          // {pattern: 'systemjs.config.js', included: false, watched: false},
          // {pattern: 'systemjs.config.extras.js', included: false, watched: false},
          // 'karma-test-shim.js',

          // // transpiled application & spec code paths loaded via module imports
          // {pattern: appBase + '**/*.js', included: false, watched: true},
          // {pattern: testBase + '**/*.js', included: false, watched: true},


          // // Asset (HTML & CSS) paths loaded via Angular's component compiler
          // // (these paths need to be rewritten, see proxies section)
          // {pattern: appBase + '**/*.html', included: false, watched: true},
          // {pattern: appBase + '**/*.css', included: false, watched: true},

          // // Paths for debugging with source maps in dev tools
          // {pattern: appSrcBase + '**/*.ts', included: false, watched: false},
          // {pattern: appBase + '**/*.js.map', included: false, watched: false},
          // {pattern: testSrcBase + '**/*.ts', included: false, watched: false},
          // {pattern: testBase + '**/*.js.map', included: false, watched: false},

          { pattern: 'spec.bundle.ts', watched: false } // Our entry point
    ],

    // files to exclude
    exclude: [],

    plugins: [
      require("karma-jasmine"),
      require("karma-phantomjs-launcher"),
      require("karma-mocha"),
      require("karma-mocha-reporter"),
      require("karma-sourcemap-loader"),
      require("karma-webpack")
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: { 'spec.bundle.ts': ['webpack', 'sourcemap'] },

    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          { test: /\.js/, exclude: [/app\/lib/, /node_modules/], loader: 'babel' },
          { test: /\.ts$/, exclude: [/node_modules/], loaders: ['awesome-typescript-loader', 'angular2-template-loader', 'angular-router-loader']},
          { test: /\.html$/, loader: 'raw' },
          { test: /\.(scss|sass)$/, loader: 'style!css!sass' },
          { test: /\.css$/, loader: 'style!css' }
        ]
      }
    },

    webpackServer: {
      noInfo: false // prevent console spamming when running in Karma!
    },

    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['mocha'],

    // web server port
    port: 9876,

    // enable colors in the output
    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,

    // toggle whether to watch files and rerun tests upon incurring changes
    autoWatch: false,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],

    // if true, Karma runs tests once and exits
    singleRun: true
  });
};

spec.bundle.ts

import { TestBed } from '@angular/core/testing';
import {
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';

TestBed.initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting()
);

// load all specs in ./src .
var context = require.context('./src/javascripts/moda-ng2', true, /\.spec\.ts/);

context.keys().map(context);

banner.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-banner',
  template: '<h1>{{title}}</h1>'
})
export class BannerComponent {
  title = 'Test Tour of Heroes';
}

banner.spec.ts

import {} from 'jasmine';

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';

import { BannerComponent } from './banner.component';

describe('BannerComponent (inline template)', () => {

    let comp:    BannerComponent;
    let fixture: ComponentFixture<BannerComponent>;
    let de:      DebugElement;
    let el:      HTMLElement;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [ BannerComponent ], // declare the test component
        });

        fixture = TestBed.createComponent(BannerComponent);

        comp = fixture.componentInstance; // BannerComponent test instance

        // query for the title <h1> by CSS element selector
        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');
    });

});

在運行“因果啟動”時，出現以下錯誤-

> karma start


START:
Hash: f4683f5fa2953dc3a97c
Version: webpack 1.12.11
Time: 37ms
webpack: Compiled successfully.
webpack: Compiling...
Hash: 1cb26b5be98c7bdd7ec0
Version: webpack 1.12.11
Time: 7040ms
         Asset     Size  Chunks             Chunk Names
spec.bundle.ts  2.13 MB       0  [emitted]  spec.bundle.ts
chunk    {0} spec.bundle.ts (spec.bundle.ts) 2.07 MB [rendered]
    [0] ./spec.bundle.ts 1.73 kB {0} [built]
    [1] ./~/@angular/core/bundles/core-testing.umd.js 46.2 kB {0} [built]
    [2] ./~/@angular/core/bundles/core.umd.js 461 kB {0} [built]
    [3] ./~/rxjs/symbol/observable.js 631 bytes {0} [built]
    [4] ./~/rxjs/util/root.js 470 bytes {0} [built]
    [5] ./~/rxjs/Subject.js 5.33 kB {0} [built]
    [6] ./~/rxjs/Observable.js 5.17 kB {0} [built]
    [7] ./~/rxjs/util/toSubscriber.js 764 bytes {0} [built]
    [8] ./~/rxjs/Subscriber.js 8.87 kB {0} [built]
    [9] ./~/rxjs/util/isFunction.js 148 bytes {0} [built]
   [10] ./~/rxjs/Subscription.js 5.99 kB {0} [built]
   [11] ./~/rxjs/util/isArray.js 146 bytes {0} [built]
   [12] ./~/rxjs/util/isObject.js 151 bytes {0} [built]
   [13] ./~/rxjs/util/tryCatch.js 422 bytes {0} [built]
   [14] ./~/rxjs/util/errorObject.js 177 bytes {0} [built]
   [15] ./~/rxjs/util/UnsubscriptionError.js 1.07 kB {0} [built]
   [16] ./~/rxjs/Observer.js 193 bytes {0} [built]
   [17] ./~/rxjs/symbol/rxSubscriber.js 270 bytes {0} [built]
   [18] ./~/rxjs/util/ObjectUnsubscribedError.js 955 bytes {0} [built]
   [19] ./~/rxjs/SubjectSubscription.js 1.4 kB {0} [built]
   [20] ./~/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js 4.68 kB {0} [built]
   [21] ./~/@angular/compiler/bundles/compiler-testing.umd.js 24.1 kB {0} [built]
   [22] ./~/@angular/compiler/bundles/compiler.umd.js 1.18 MB {0} [built]
   [23] ./~/@angular/platform-browser/bundles/platform-browser-testing.umd.js 7.91 kB {0} [built]
   [24] ./~/@angular/platform-browser/bundles/platform-browser.umd.js 170 kB {0} [built]
   [25] ./~/@angular/common/bundles/common.umd.js 137 kB {0} [built]
   [26] ./~/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js 7.03 kB {0} [built]
   [27] ./src/javascripts/moda-ng2 \.spec\.ts 198 bytes {0} [built]
   [28] ./src/javascripts/moda-ng2/src/app/services/banner.spec.ts 1.65 kB {0} [optional] [built] [1 error]

**ERROR in ./src/javascripts/moda-ng2/src/app/services/banner.spec.ts
Module not found: Error: Cannot resolve 'file' or 'directory' ./banner.component in /home/denimuser/Documents/maya/src/javascripts/moda-ng2/src/app/services
 @ ./src/javascripts/moda-ng2/src/app/services/banner.spec.ts 4:25-54
webpack: Failed to compile.**

./src/javascripts/moda-ng2/src/app/services/banner.spec.ts中的錯誤找不到模塊：錯誤：無法解析/ home / denimuser / Documents中的'文件'或'目錄'./banner.component / maya / src / javascripts / moda-ng2 / src / app / services @ ./src/javascripts/moda-ng2/src/app/services/banner.spec.ts 4：25-54 webpack：無法編譯。

但是，此測試運行-simple.spec.ts

import {} from 'jasmine';
describe('Meaningful Test', () => {

    it('1 + 1 => 2', () => {

        expect(1 + 1).toBe(2);
    });
});

因此，該語句import { BannerComponent } from './banner.component'; banner.spec.ts中無法加載“ BannerComponent”

我究竟做錯了什么。 請幫忙 ：）

Answer 1

在karma config中的files選項下，您僅包括了spec為src文件添加入口路徑，這也是因為files選項告訴karma在瀏覽器中加載文件，所以我認為這是主要問題。 為此嘗試。

Answer 2

最后通過添加使它起作用

      resolve: {
          extensions: ['', '.js', '.ts', '.html']
      },

到webpack的測試配置！

該死的！！ 多么美好的一天！ ： - /