Can I debug AngularJS and TypeScript in Eclipse?

I just started working with TypEcs, and I'm trying to create a webpage in Typescript and AngularJS, which I want to debug in Eclipse.

  • Is it possible to debug a Typescript and Angular page in Eclipse? If so, can you steer me in the right direction?

I tried to debug a single Typescript file with the Typescript Standalone parameter and it works. But I also want to use AngularJS. I created the index.html file and the app.ts file. I also imported angular.d.ts and angular.min.js, among others, into the script folder. Can I do this using any of the TypEcs Typescript debuggers? I tried to run it, but I get an error message in var app = angular.module ... (ReferenceError: Angular not defined).

I assume that the angular.min.js file that I reference in the index file was not loaded. Is it because app.ts is set as the main file in a stand-alone Typescript configuration? (I cannot select index.html) And / Or am I missing code / settings?

I hope you help me. Thank you in advance!

Here is a sample code: index.html:

<html ng-app="helloworld"> <head> <title>Hello World!</title> </head> <body> <div class="container" ng-controller="HelloWorldCtrl"> <input type="text" class="form-control" value="{{message}}" /> </div> <script src="../scripts/angular.min.js"></script> <script src="app.js"></script> </body> </html> 

app.ts:

 /// <reference path="../scripts/typings/angularjs/angular.d.ts"/> module Sample.HelloWorld { export interface IHelloWorldScope extends ng.IScope { message: string; } export class HelloWorldCtrl { static $inject = ["$scope"]; constructor(private scope: IHelloWorldScope) { scope.message = "Hello World"; } } var app = angular.module("helloworld",["ui.bootstrap"]); app.controller("HelloWorldCtrl", HelloWorldCtrl); } 
+6
source share
2 answers

As Basarat said, you can debug AngularJS and TypeScript using the "TypeScript Web Remote Debugging" which is included in TypEcs

How to debug a page:

  • Close all open chrome windows.
  • Open Chrome again with the command chrome.exe --remote-debugging-port = 9222
  • Apply debug configuration according to “Add TypeScript Debugging for Remote WebKit Mode” in TypEcs / 2.0 - New and Noteworthy
  • Open the start page (index.html) in the chrome window from step 1.
  • Go into debug mode
  • Debugging using the configuration from step 3
  • A dialog box will appear in which you need to select the tab with the file that you want to debug.
  • Now you can go through the code and add breakpoints to the app.ts file if you want. (Click the Main section if you do not see the step options)

And if you get the error message “Cannot get tabs for debugging connection timeout”, close all chrome windows and start chrome again using the command chrome.exe --remote-debugging-port = 9222.

+4
source

I tried to debug a single typescript file with the typescript parameter Standalone and it works. But I also want to use AngularJS

These steps are similar to offline. You must have source maps enabled.

ReferenceError: angular not defined

Something is wrong with the script tag for angular.min.js Check the file system and / or browser network request.

See webkit remote debug: https://bitbucket.org/axmor/typecs/wiki/2.0%20-%20New%20and%20Noteworthy

+1
source

Source: https://habr.com/ru/post/974674/


All Articles