Question

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

这是我用于测试的业力表。

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，因为它现在似乎是基于"polyfills": "polyfills.ts"中angular-cli.json的 ng 添加的。

以下是列出其他所需更改的beta-＆gt; rc upgrade guide。

Answer 2

我解决了以下问题。

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

npm install angularfire2@5.0.0-rc.4

然后安装npm

npm安装

然后在src / main.ts上删除此行

import  './polyfills';

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

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

2 个答案: