Angular &引用；未捕获错误：区域已加载。”；在业力测试期间

我所希望的是，当我使用Karma运行单元测试时，能够将我的typescript文件加载到浏览器的调试器中。如果我删除karma typescript，测试将运行，但我只能使用传输的javascript进行调试。使用karma typescript，我得到了上面的错误。在使用karma时，我需要做什么来调试我的typescript文件

这是我用于测试的业力形态

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);
};

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'
    ]
  }
};

这是我的用于测试的网页配置

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);
};

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'
    ]
  }
};

这是我的网页配置，用于运行应用程序

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')}`
};

请告诉我您还需要什么其他信息或代码。

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

import './polyfills.ts';

从

src/test.ts

，现在似乎是由ng基于

“polyfills”添加的：
angular cli.json
中的“polyfills.ts”

---

这里是beta->rc，列出了其他需要的更改

我修复我的问题如下

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

npm安装angularfire2@5.0.0-rc.4

然后安装npm

npm安装

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

import  './polyfills';

---

这对我有用。我只想和你分享。我希望它能帮助一些人。

我在尝试迁移到@angular/cli 1.0.0-rc.0（从1.0.0-beta.26）时遇到了同样的问题。完全相同的解决方案刚刚对我起作用。谢谢。标记为答案是因为它提示我使用angular cli而不是Yeoman重建我的项目，然后测试成功了。我没有找到angular-cli.json flile。确切的位置在哪里，或者我必须创建一个新的位置？