VS Code中的打字稿,测试和调试

时间:2017-07-29 03:20:09

标签: angular debugging testing visual-studio-code karma-jasmine

我是angular2和typescript的新手,并创建了一个使用角度CLI生成的简单应用程序。在继续之前,我不得不说我对在VS Code中看到打字稿代码和在浏览器中运行应用程序之间发生的事情的理解存在差距。

在以前的编辑器中,我习惯于看到生成的.js文件,并将我正在运行的应用程序理解为带有这些生成文件的网页。但是当一个人运行ng serve时,任何地方都没有.js文件,应用程序仍在浏览器中运行。我想知道的第一件事就是如何发生 - 我认为浏览器无法读取打字稿。

其次,我在使用VS Code在Karma测试运行器中调试单元测试时遇到问题。我能够调试应用程序本身,我能够将调试器附加到Karma实例,但是当我在测试中放置断点时,我得到错误breakpoint ignored because generated code not found (source map problem?)。作为参考,这是我的launch.json

    {
        "type": "chrome",
        "request": "attach",
        "name": "Attach Karma Chrome",
        "address": "127.0.0.1",
        "port": 9333,
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    }

我的karma.conf.js包含

browsers: ['ChromeDebugging'],
customLaunchers : {
  ChromeDebugging: {
    base: 'Chrome',
    flags: ['--remote-debugging-port=9333']
  }
},

编辑:这是完整的karma.conf.js

2 个答案:

答案 0 :(得分:0)

试试这个

.factory("SearchService", function($http, $q) {  

  var service = {
    flatexhibitors : [],
    datafairs : [],
    getAllExhibitors : function (wop) {
      var deferred = $q.defer();
      var searchindex = wop;
        var url = '../register/backend/databaseconnect/getexhibitors.php';
        var config = {
            params: {
                search: searchindex
            },
            cache:true
        };
        $http.get(url, config).then(function (data) {
          service.datafairs = data.data.rows;
          for (var i in service.datafairs) {
            service.flatexhibitors.push(service.datafairs[i].doc);
          };
          deferred.resolve(service.flatexhibitors);
        }, function (error) {
          console.log(error);
          deferred.reject(error);
        });
        return deferred.promise; 
    }

  }
  return service;

})

答案 1 :(得分:0)

我决定使用angular seed存储库

在浏览器中调试测试