karma-webpack没有加载AngularJS包

我最近开始从一个习惯的gulp脚本转移到webpack,这个脚本用来处理各种各样的东西.我让它工作到一个点,在浏览器中转换,捆绑和服务客户​​端应用程序非常好.

现在,当我使用gulp对捆绑的app.js文件运行我的业力测试时,gulp脚本将首先捆绑app.js文件,然后将其吐入dist文件夹.然后该业务将使用该文件对其运行测试.我的gulp测试任务还会监视任何测试文件更改或更改bundle文件,并根据它重新运行测试.

使用webpack,我理解这个dist / app.js驻留在内存中,而不是写入磁盘(至少我是如何设置它的).问题在于,似乎我的捆绑应用程序(通过webpack-dev-server –open获得良好服务)不会因为某些原因而被业力所加载,我无法弄清楚这个难题的缺失部分是.

这就是我的文件夹结构的样子(我只留下了与问题相关的最基本的东西)：

package.json
webpack.config.js
karma.conf.js
src/
--app/
----[other files/subfolders]
----app.ts
----index.ts
--boot.ts
--index.html
tests/
--common/
----services/
------account.service.spec.js

这是我的webpack.config.js

var path = require("path");

const webpack = require("webpack");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const cleanWebpackPlugin = require("clean-webpack-plugin");
const ForkTscheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

module.exports = {
  context: path.join(__dirName),entry: "./src/boot.ts",plugins: [
    new webpack.HotModulereplacementPlugin(),new ForkTscheckerWebpackPlugin(),new CleanWebpackPlugin(["dist"]),new HtmlWebpackPlugin({
      template: "./src/index.html"
    })
  ],module: {
    rules: [
      {
        test: /\.scss$/,use: [{
          loader: "style-loader"
        },{
          loader: "css-loader"
        },{
          loader: "sass-loader"
        }]
      },{
        test: /\.tsx?$/,use: [{
          loader: "ts-loader",options: {
            transpiLeonly: true,exclude: /node_modules/
          }
        }]
      },{
        test: /\.html$/,loaders: "html-loader",options: {
          attrs: [":data-src"],minimize: true
        }
      }
    ]
  },resolve: {
    extensions: [".tsx",".ts",".js"],alias: {
      "common": path.resolve(__dirname,"src/app/common"),"common/*": path.resolve(__dirname,"src/app/common/*"),"modules": path.resolve(__dirname,"src/app/modules"),"modules/*": path.resolve(__dirname,"src/app/modules/*"),}
  },output: {
    filename: "app.js",path: path.resolve(__dirname,"dist")
  },devtool: "inline-source-map",devServer: {
    historyApifallBACk: true,hot: false,contentBase: path.resolve(__dirname,"dist")
  }
};

这是我的karma.conf.js

const webpackConfig = require("./webpack.config");

module.exports = function (config) {
  config.set({
    frameworks: ["jasmine"],files: [
      "node_modules/angular/angular.js","node_modules/angular-mocks/angular-mocks.js","dist/app.js",// not sure about this
      "tests/common/*.spec.js","tests/common/**/*.spec.js"
    ],preprocessors: {
      "dist/app.js": ["webpack","sourcemap"],// not sure about this either
      "tests/common/*.spec.js": ["webpack","tests/common/**/*.spec.js": ["webpack","sourcemap"]
    },webpack: webpackConfig,webpackMiddleware: {
      noInfo: true,stats: {
        chunks: false
      }
    },reporters: ["progress","coverage"],//,"teamcity"],coverageReporter: {
      dir: "coverage",reporters: [
        { type: "html",subdir: "html" },{ type: "text-sumMary" } 
      ]
    },port: 9876,colors: true,logLevel: config.LOG_INFO,autoWatch: true,browsers: [
      "PhantomJS"
      //"Chrome"
    ],singleRun: false,concurrency: Infinity,browserNoActivityTimeout: 100000
  });
};

这是boot.ts,它基本上是应用程序的入口点：

import * as app from "./app/app";
import "./styles/app.scss";

// This never gets written to the console
// so I kNow it never gets loaded by karma
console.log("I NEVER OUTPUT TO CONSOLE");

这是app.ts(然后引用它下面的任何内容：

import * as ng from "angular";
import * as _ from "lodash";

import "@uirouter/angularjs";
import "angular-cookies";
import "angular-material"
import "angular-local-storage";
import "angular-sanitize";
import "angular-messages";
import "angular-file-saver";
import "angular-loading-bar";
import "satellizer";

export * from "./index";

import * as Module from "common/module";
import * as AuthModule from "modules/auth/module";
import * as UserModule from "modules/user/module";

import { MyAppConfig } from "./app.config";
import { MyAppRun } from "./app.run";

export default ng.module("MyApp",[
  "ngCookies","ngSanitize","ngmessages","ngFileSaver","LocalStorageModule","ui.router","ngMaterial","satellizer","angular-loading-bar",Module.name,AuthModule.name,UserModule.name
])
.config(MyAppConfig)
.run(MyAppRun);

最后,这是account.service.spec.js

describe("Account service",function () {
  // SETUP

  var _Accountservice;

  beforeEach(angular.mock.module("MyApp.Common"));
  beforeEach(angular.mock.inject(function (_Accountservice_) {
    // CODE NEVER GETS IN HERE EITHER
    console.log("I NEVER OUTPUT TO CONSOLE");
    _Accountservice = _Accountservice_;
  }));

  function expectValidpassword(result) {
    expect(result).toEqual({
      minCharacters: true,lowercase: true,uppercase: true,digits: true,isValid: true
    });
  }

  // TESTS

  describe(".validatepassword()",function () {
    describe("on valid password",function () {
      it("returns valid true state",function () {
        expectValidpassword(_Accountservice.validatepassword("asdfASDF123"));
        expectValidpassword(_Accountservice.validatepassword("as#dfAS!DF123%"));
        expectValidpassword(_Accountservice.validatepassword("aA1234%$2"));
        expectValidpassword(_Accountservice.validatepassword("YYyy22!@"));
        expectValidpassword(_Accountservice.validatepassword("Ma#38Hr$"));
        expectValidpassword(_Accountservice.validatepassword("aA1\"#$%(#/$\"#$/(=/#$=!\")(\")("));
      })
    });
  });
});

这是运行业力开始的输出

> npm test

> myapp@1.0.0 test E:\projects\whatever
> karma start

clean-webpack-plugin: E:\projects\whatever\dist has been removed.
StarTing type checking service...
Using 1 worker with 2048MB memory limit
31 10 2017 21:47:23.372:WARN [watcher]: Pattern "E:/projects/whatever/dist/app.js" does not match any file.
31 10 2017 21:47:23.376:WARN [watcher]: Pattern "E:/projects/whatever/tests/common/*.spec.js" does not match any file.
ts-loader: Using typescript@2.4.2 and E:\projects\whatever\tsconfig.json
No type errors found
Version: typescript 2.4.2
Time: 2468ms
31 10 2017 21:47:31.991:WARN [karma]: No captured browser,open http://localhost:9876/
31 10 2017 21:47:32.004:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
31 10 2017 21:47:32.004:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
31 10 2017 21:47:32.010:INFO [launcher]: StarTing browser PhantomJS
31 10 2017 21:47:35.142:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket PT-pno0eF3hlcdNEAAAA with id 71358105
PhantomJS 2.1.1 (Windows 8 0.0.0) Account service .validatepassword() on valid password returns valid true state Failed
        forEach@node_modules/angular/angular.js:410:24
        loadModules@node_modules/angular/angular.js:4917:12
        createInjector@node_modules/angular/angular.js:4839:30
        WorkFn@node_modules/angular-mocks/angular-mocks.js:3172:60
        loaded@http://localhost:9876/context.js:162:17
        node_modules/angular/angular.js:4958:53
        TypeError: undefined is not an object (evaluaTing '_Accountservice.validatepassword') in tests/common/services/account.service.spec.js (line 742)
        webpack:///tests/common/services/account.service.spec.js:27:0 <- tests/common/services/account.service.spec.js:742:44
        loaded@http://localhost:9876/context.js:162:17
PhantomJS 2.1.1 (Windows 8 0.0.0) Account service .validatepassword() on valid amount of characters returns minCharacters true Failed
        forEach@node_modules/angular/angular.js:410:24
        loadModules@node_modules/angular/angular.js:4917:12
        createInjector@node_modules/angular/angular.js:4839:30
        WorkFn@node_modules/angular-mocks/angular-mocks.js:3172:60
        node_modules/angular/angular.js:4958:53
        TypeError: undefined is not an object (evaluaTing '_Accountservice.validatepassword') in tests/common/services/account.service.spec.js (line 753)
        webpack:///tests/common/services/account.service.spec.js:38:0 <- tests/common/services/account.service.spec.js:753:37
PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 2 of 2 (2 Failed) ERROR (0.017 secs / 0.015 secs)

请注意我离开console.logs的几个地方,这些地方永远不会被触发.这就是我知道应用程序没有加载的方式.那和茉莉花无法注入我想测试的服务这一事实.

我正在使用：

karma v1.7.1
karma-webpack v2.0.5
webpack v3.3.0

有任何想法吗？我究竟做错了什么？我的印象是我的webpack.config.js应该捆绑我的AngularJS / TS应用程序然后基本上把它送到业力,但无论出于何种原因,这似乎不起作用.或者我对这应该如何运作有一些根本的误解？

谢谢.

我将一些文件提取到一个简单的应用程序中并将其放到github中,以便轻松复制该问题.

npm install # install deps
npm run serve:dev # run the app - works
npm run test # run karma tests - doesn't work

编辑：

我设法通过替换以下命令来运行测试：

"dist/app.js"

在业力设置中

"src/boot.ts"

但这不会向下钻取或加载/导入应用程序的其余部分.然后我尝试只导入我要测试的类到规范,但后来我无法模拟我正在测试的类正在使用的任何DI注入的服务.无论如何,我在这个阶段几乎放弃了这个,并且不再试图弄清楚如何做到这一点,转向ang2.

"dev-build": "webpack --config webpack/development.js","dev-test": "karma start test/karma.development.conf.js","test": "concurrently --kill-others --raw \"npm run dev-build\" \"npm run dev-test\""

entry: { 'ui-scroll': path.resolve(__dirname,'../src/ui-scroll.js') },output: { filename: '[name].js' },// + path to ./dist in prod
devtool: 'inline-source-map',// 'source-map' in prod
compressing: false,watch: true

files: [
  // external libs
  // tests specs
  '../src/ui-scroll.js' // ../dist in prod
],preprocessors: { // no preprocessors in prod
  '../src/ui-scroll.js': ['webpack','sourcemap']
},webpack: require('../webpack/development.js'),// no webpack in prod
autoWatch: true,keepalive: true,singleRun: false