如何使用 Visual Studio Code 调试 Angular 4 单元测试

Question

我有一个 Angular 4 / Material 项目，并且正在使用 Visual Studio Code。该项目是使用 angular/cli 设置的

我已经开始使用 Karma 和 Jasmin 编写一些单元测试。设置全部由 angular/cli 完成。

现在我想调试我的测试。

运行“ng test”会出现一些错误。尝试通过在代码中设置断点来调试这些错误，没有结果。

使用 google 我发现了很多关于如何配置 Karma 和 VSC 的建议，但没有一个对我有帮助。 我的猜测是这是一个版本相关的问题。

那么根据我的设置，任何人都可以帮助我吗？

  "dependencies": {
    "@angular/animations": "^4.3.6",
    "@angular/cdk": "^2.0.0-beta.10",
    "@angular/common": "^4.3.6",
    "@angular/compiler": "^4.3.6",
    "@angular/core": "^4.3.6",
    "@angular/flex-layout": "^2.0.0-rc.1",
    "@angular/forms": "^4.3.6",
    "@angular/http": "^4.3.6",
    "@angular/material": "^2.0.0-beta.10",
    "@angular/platform-browser": "^4.3.6",
    "@angular/platform-browser-dynamic": "^4.3.6",
    "@angular/router": "^4.3.6",
    "core-js": "^2.5.1",
    "npm": "^5.4.0",
    "rxjs": "^5.4.3",
    "uuid": "^3.1.0",
    "zone.js": "^0.8.17"
  },
  "devDependencies": {
    "@angular/cli": "1.2.1",
    "@angular/compiler-cli": "^4.3.6",
    "@angular/language-service": "^4.3.6",
    "@types/jasmine": "2.5.53",
    "@types/node": "^8.0.26",
    "codelyzer": "~3.1.2",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "npm-check-updates": "^2.12.1",
    "protractor": "~5.1.2",
    "ts-mockito": "^2.1.1",
    "ts-node": "~3.2.2",
    "tslint": "~5.5.0",
    "typescript": "~2.4.0"
  }

编辑

如果我发布我的配置文件，也许有人会发现一些问题。

tsconfig.json


{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceRoot": "../src",
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

tsconfig.spec.json


{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "target": "es5",
    "baseUrl": "",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

karma.config.js



module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    browsers: ['ChromeDebugging'],
    customLaunchers: {
      ChromeDebugging: {
        base: 'Chrome',
        flags: [ '--remote-debugging-port=9333' ]
      }
    },
    
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    singleRun: false
  });
};

launch.json


{
    "version": "0.2.0",
    "configurations": [

        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "address": "localhost",
            "port": 9333,
            "pathMapping": {
                "/": "${workspaceRoot}",
                "/base/": "${workspaceRoot}/"
              }
            
        },

        {
            "name": "Run jasmine",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:9876/debug.html",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/src",
            
            "skipFiles": [
              "node_modules/**/*"
            ],       
            "sourceMapPathOverrides": {
              "webpack:///./*": "${workspaceRoot}/*"
            }
          },
                {
                    "type": "chrome",
                    "request": "attach",
                    "name": "Attach Karma Chrome",
                    "address": "localhost",
                    "port": 9333,
                    "sourceMaps": true,
                    "trace": "verbose",
                    "pathMapping": {
                        "/": "${workspaceRoot}/",
                        "/base/": "${workspaceRoot}/"
                    }
                }
           
    ]
}

Answer 1

我的解决方案是用最新最好的 angular-cli 创建一个新的 angular。它像跳舞一样工作，然后我将配置文件复制到我的真实项目中。