Come eseguire il debug di un'applicazione TypeScript Angular2 in codice Visual Studio?

Come si configura e si esegue il debug di un'applicazione Angular2 TypeScript in Visual Studio Code?Come eseguire il debug di un'applicazione TypeScript Angular2 in codice Visual Studio?

Ho provato a importare il es6-shim e reflect-metadata senza successo. Il codice rilevante è sotto. Per favore fatemi sapere se avete bisogno di ulteriori dettagli.

Nota: sto utilizzando Angular2 Beta.

error messaggio

Debugger listening on port 24565 
c:\Users\LeviF\OneDrive\Source Code\Github\SimpleMarket\app\bin\boot.js:1 
System.register(['angular2/platform/browser', './app.component'], function(exports_1) { 
^ 

ReferenceError: System is not defined 
    at Object.<anonymous> (c:\Users\LeviF\OneDrive\Source Code\Github\SimpleMarket\app\bin\boot.js:1:1) 
    at Module._compile (module.js:399:26) 
    at Object.Module._extensions..js (module.js:406:10) 
    at Module.load (module.js:345:32) 
    at Function.Module._load (module.js:302:12) 
    at Module.runMain [as _onTimeout] (module.js:431:10) 
    at Timer.listOnTimeout (timers.js:93:15)

index.html

<html> 

    <head> 
    <title>Angular 2 QuickStart</title> 

    <!-- 1. Load libraries --> 

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="node_modules/es6-shim/es6-shim.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script> 

    <!-- 2. Configure SystemJS --> 
    <script> 
     System.config({ 
     packages: {   
      app: { 
      format: 'register', 
      defaultExtension: 'js' 
      } 
     } 
     }); 
     System.import('app/bin/boot') 
      .then(null, console.error.bind(console)); 
    </script> 
    <script> 

    </script> 

    </head> 

    <!-- 3. Display the application --> 
    <body> 
    <my-app>Loading...</my-app> 
    </body> 

</html>

boot.ts

//import 'reflect-metadata'; 
// import 'es6-shim'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {AppComponent} from './app.component'; 

// This loads our AppComponent as the ROOT Component (The app entry point) 
bootstrap(AppComponent);

app.component.ts

import {Component} from 'angular2/core'; 
import {StockComponent} from './stock/stock.component'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/src/app.view.html', 
    directives: [StockComponent] 
}) 
export class AppComponent{ 
    public name: string; 

    getStock(){ 
     this.name = "hello"; 
     console.log('trying'); 
    } 
}

Launch.json

{"version": "0.2.0", 
    "configurations": [ 
     { 
      "name": "Launch type", 
      "type": "node", 
      "program": "app/src/boot.ts", 
      "stopOnEntry": true, 
      "sourceMaps": true, 
      "outDir": "app/bin" 
     }, 
     { 
      "name": "Attach", 
      "type": "node", 
      "request": "attach", 
      "port": 3000 
     } 
    ] 
}

fonte

2015-12-28 Levi Fuller

Is node_modules/systemjs/dist/system.src.js posizione valida con file? L'hai installato con il gestore di pacchetti npm? –

Sì, l'ho installato tramite npm. L'applicazione funziona correttamente con 'npm start' e l'errore si verifica solo durante il tentativo di avvio tramite" modalità di debug ". –

Possibile duplicato di [Debug & Run Angular2 Typescript con codice Visual Studio?] (Http://stackoverflow.com/questions/36494938/debug-run-angular2-typescript-with-visual-studio-code) –

Sono riuscito a fare questo lavoro utilizzando il debugger-for-chrome extension per il codice vs. Basta seguire le istruzioni di installazione ivi menzionate, e creare un file launch.json simile a questo:

{ 
"version": "0.2.0", 
"configurations": [ 
    { 
     "name": "Launch localhost with sourcemaps", 
     "type": "chrome", 
     "request": "launch", 
     "url": "http://localhost:3000", 
     "sourceMaps": true, 
     "webRoot": "${workspaceRoot}" 
    } 
]}

anche assicurarsi che avete Sourcemap impostata su true nella vostra tsconfig.json. Il mio aspetto:

{ 
"compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "watch": true 
}, 
"exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
]}

ho provato con l'esempio QuickStart angular2 tour-of-heroes (versione dattiloscritta) e funziona benissimo. Basta fare in modo di eseguire

npm start

prima di eseguire il vs debugger in cromo, in modo da avere qualcuno di servire la pagina indice.

EDIT 1: L'autore dell'estensione ha anche aggiunto l'app tour-of-heroes come esempio di lavoro nel suo repository.

fonte

2016-04-10 21:50:11

Funziona ... tipo di. Ci sono ancora alcuni punti di interruzione che non possono essere colpiti per qualche motivo (Screenshot: http://snag.gy/Hq6gC.jpg), e se hai specificato un diverso 'outDir', eseguirà solo il debug dei file js. Qualche idea su come risolverei questo? –

È possibile specificare un outDIr diverso nel file launch.json ({configurazioni: {... "outDir": "bin"}}). Non sono ancora sicuro che i punti di interruzione non vengano colpiti. L'ho visto anche di tanto in tanto. Avrò un'occhiata stasera, dato che ho 2 intuizioni: una è legata ai file js di chrome caching, l'altra alla mia configurazione del def server. Tornerò con i dettagli. Nel frattempo, si potrebbe voler dare un'occhiata a https://github.com/Microsoft/vscode-chrome-debug/issues/42, dove sembrano risolvere un caso d'uso simile al nostro. –

Fantastico, proverò a specificare l'outDir in launch.json. Fammi sapere se capisci qualcosa per i punti di interruzione che non vengono colpiti. –

-4

In tsconfig.json, si dovrebbe utilizzare la configurazione CommonJS:

"modulo": "commonjs",

fonte

2016-01-16 07:16:56 Jaime

Ciò non modifica nulla. –

Come eseguire il debug di un'applicazione TypeScript Angular2 in codice Visual Studio?

risposta

Problemi correlati