“未捕获的错误：区域已加载。”在业力测试期间答案

【问题标题】："Uncaught Error: Zone already loaded." during karma test“未捕获的错误：区域已加载。”在业力测试期间
【发布时间】：2017-07-13 04:16:32
【问题描述】：

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

这是我用于测试的 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')}`
};

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

【问题讨论】：

我在尝试迁移到 @angular/cli 1.0.0-rc.0（来自 1.0.0-beta.26）时遇到了同样的问题

标签： angular typescript webpack karma-runner

【解决方案1】：

在我的情况下（从 1.0.0-beta.26 迁移到 @angular/cli 1.0.0-rc.0）我通过删除来修复它

import './polyfills.ts';

来自src/test.ts，因为它现在似乎是由ng 基于"polyfills": "polyfills.ts" 在angular-cli.json 中添加的。

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

【讨论】：

完全相同的解决方案 just 对我有用。谢谢。
标记为答案，因为它提示我使用 angular cli 而不是 Yeoman 重建我的项目，然后测试工作。
我没有找到 angular-cli.json 文件。确切的位置在哪里，或者我必须创建一个新的？

【解决方案2】：

我解决了我的问题如下。

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

npm install angularfire2@5.0.0-rc.4

然后安装 npm

npm 安装

然后删除 src/main.ts 上的这一行

import  './polyfills';

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

【讨论】：