Typescript, Tests und Debugging in VS-Code

Question

Ich bin neu in eckigen2 und Typoskript und habe eine einfache Anwendung, die mit dem eckigen CLI generiert wurde gemacht. Bevor ich fortfahre, muss ich feststellen, dass es eine Lücke in meinem Verständnis dessen gibt, was zwischen dem Anzeigen von Typoskript-Code in VS Code und einer laufenden App im Browser passiert.

In früheren Editoren war ich es gewohnt, .js-Dateien zu sehen, die generiert wurden, und machte Sinn für meine laufende Anwendung als eine Webseite mit diesen generierten Dateien. Aber wenn man ng serve ausführt, gibt es keine .js-Dateien irgendwo und die App läuft immer noch im Browser. Das erste, was ich wissen möchte, ist, wie das passiert - ich dachte, Typoskript könnte von Browsern nicht gelesen werden.

Zweitens habe ich Probleme, Unit-Tests in der Karma-Test-Runner mit VS-Code zu debuggen. Ich bin in der Lage, die Anwendung selbst zu debuggen, ich bin in der Lage, den Debugger an die Karma-Instanz anhängen, aber wenn ich einen Haltepunkt in meinem Test setzen, erhalte ich den Fehler breakpoint ignored because generated code not found (source map problem?). Als Referenz ist mein launch.json:

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

und meine karma.conf.js enthält

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

EDIT: Dies ist die vollständige karma.conf.js

Answer 1

versuchen, diese

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

Answer 2

ich zu debuggen entschieden haben, Tests im Browser mit der angular seed repository