CODEWITHSUNDEEP
eclipseangularjstypescript
Sofi
Sofi

Reputation: 191

Can I debug AngularJS and TypeScript in Eclipse?

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

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

My guess is that the angular.min.js file which I link to in the index file hasn't been loaded. Is it because app.ts is set to be main file in the TypeScript Standalone configuration? (I cannot choose the index.html) And/Or am I missing some code/settings?

I hope you can help me. Thank you in advance!

Here is some example 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);
}

Upvotes: 6

Views: 9602

Answers (2)

Sofi
Sofi

Reputation: 191

As Basarat mentioned it is possible to debug AngularJS and TypeScript using the "TypeScript Web Remote" debug option which is included in TypEcs

How to debug the page:

  1. Close all open chrome windows.
  2. Open Chrome again with the command chrome.exe --remote-debugging-port=9222
  3. Apply a debug configuration according to "Add TypeScript Debug for WebKit remote mode" at TypEcs / 2.0 - New and Noteworthy
  4. Open your start page (index.html) in the chrome window from point 1.
  5. Go to debug view
  6. Debug using the configuration from step 3
  7. A dialog appears where you need to select the tab with the file that you wish to debug.
  8. Now you can step through the code and add breakpoints to the app.ts file if you wish. (Click on Main thread if you don't see the step options)

And if you get the error "Failed to get tabs for debugging connect timed out" close all chrome windows and reopen chrome with the chrome.exe --remote-debugging-port=9222 command.

Upvotes: 4

basarat
basarat

Reputation: 276085

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

The steps are same as standalone. You should have sourcemaps enabled.

ReferenceError: angular is not defined

There is something wrong with your 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

Upvotes: 2

Related Questions