"Uncaught Error: Zone already loaded." during karma test

Question

我想要的只是当我运行使用 Karma 进行单元测试时能够将我的打字稿文件加载到浏览器的调试器中。如果我删除 karma-typescript，测试运行，但我只能使用转译的 javascript 进行调试。使用 karma-typescript，我得到了上面的错误。使用 karma 时我需要做什么来调试我的打字稿文件？

这是我用于测试的 karma conf。

const conf = require('./gulp.conf');

module.exports = function (config) {
const configuration = {
basePath: '../',
singleRun: false,
autoWatch: true,
logLevel: 'INFO',
junitReporter: {
  outputDir: 'test-reports'
},
browsers: [
  'Chrome'
],
frameworks: [
  'jasmine',
  'karma-typescript'
],
files: [
  { pattern: "src/**/*.ts" },
  conf.path.src('index.spec.js')
],
preprocessors: {
  [conf.path.src('index.spec.js')]: [
    'webpack'
  ],
  "**/*.ts": ['karma-typescript']
},
reporters: ['progress', 'coverage', 'karma-typescript'],
coverageReporter: {
  type: 'html',
  dir: 'coverage/'
},
webpack: require('./webpack-test.conf'),
webpackMiddleware: {
  noInfo: true
},
plugins: [
  require('karma-jasmine'),
  require('karma-junit-reporter'),
  require('karma-coverage'),
  require('karma-chrome-launcher'),
  require('karma-webpack'),
  require('karma-typescript')
]
};

  config.set(configuration);
};

这是我用于测试的 webpack conf。

const webpack = require('webpack');
const conf = require('./gulp.conf');
module.exports = {
  module: {
    loaders: [
      {
        test: /.json$/,
        loaders: [
          'json-loader'
        ]
      },
      {
        test: /.ts$/,
        exclude: /node_modules/,
        loader: 'tslint-loader',
        enforce: 'pre'
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loaders: [
          'ts-loader'
        ]
      },
      {
        test: /.html$/,
        loaders: [
          'html-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      /angular(\|\/)core(\|\/)(esm(\|\/)src|src)(\|\/)linker/,
      conf.paths.src
    ),
    new webpack.LoaderOptionsPlugin({
      options: {
        resolve: {},
        ts: {
          configFileName: 'tsconfig.json'
        },
        tslint: {
          configuration: require('../tslint.json')
        }
      },
      debug: true
    }),
    new webpack.SourceMapDevToolPlugin({
      filename: null,
      test: /\.(ts|js)($|\?)/i
    })
  ],
  devtool: 'source-map',
  resolve: {
    extensions: [
      '.webpack.js',
      '.web.js',
      '.js',
      '.ts'
    ]
  }
};

这是用于运行应用程序的我的 webpack conf。

const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const FailPlugin = require('webpack-fail-plugin');
const autoprefixer = require('autoprefixer');
const fileLoader = require('file-loader');

module.exports = {
  module: {
    loaders: [
      {
        test: /.json$/,
        loaders: [
          'json-loader'
        ]
      },
      {
        test: /.ts$/,
        exclude: /node_modules/,
        loader: 'tslint-loader',
        enforce: 'pre'
      },
      {
        test: /\.(css|scss)$/,
        loaders: [
          'style-loader',
          'css-loader',
          'sass-loader',
          'postcss-loader'
        ]
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loaders: [
          'ts-loader'
        ]
      },
      {
        test: /.html$/,
        loaders: [
          'html-loader'
        ]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: "file-loader?name=/public/images/[name].[ext]"

      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoErrorsPlugin(),
    FailPlugin,
    new HtmlWebpackPlugin({
      template: conf.path.src('index.html')
    }),
    new webpack.ContextReplacementPlugin(
      /angular(\|\/)core(\|\/)(esm(\|\/)src|src)(\|\/)linker/,
      conf.paths.src
    ),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: () => [autoprefixer],
        resolve: {},
        ts: {
          configFileName: 'tsconfig.json'
        },
        tslint: {
          configuration: require('../tslint.json')
        }
      },
      debug: true
    })
  ],
  devtool: 'source-map',
  output: {
    path: path.join(process.cwd(), conf.paths.tmp),
    filename: 'index.js'
  },
  resolve: {
    extensions: [
      '.webpack.js',
      '.web.js',
      '.js',
      '.ts'
    ]
  },
  entry: `./${conf.path.src('index')}`
};

请让我知道您还需要什么其他信息或代码。

Answer 1

在我的例子中（从 1.0.0-beta.26 迁移到@angular/cli 1.0.0-rc.0）我通过删除

修复了它

import './polyfills.ts';

来自src/test.ts，因为它现在似乎是由ng在angular-cli.json.

的"polyfills": "polyfills.ts"的基础上添加的

这是 beta->rc upgrade guide 列出了其他需要的更改。

Answer 2

我按以下方式解决了我的问题。

使用此命令安装低版本的firebase

npm 安装 angularfire2@5.0.0-rc.4

然后安装 npm

npm 安装

然后删除 src / main.ts

上的这一行

import  './polyfills';

对我有用。我只是想分享它。我希望它会对某人有所帮助。

"Uncaught Error: Zone already loaded." during karma test

"Uncaught Error: Zone already loaded." during karma test

typescript

karma-runner

webpack

angular