Is it possible to use Eclipse for debugging AngularJS and TypeScript code?

I recently dove into the world of TypEcs and am currently working on developing a webpage using Typescript and AngularJS that I'd like to debug in Eclipse.

  • Is it feasible to debug a TypeScript and Angular page in Eclipse? If so, could you provide me with some guidance on how to achieve this?

I attempted to debug a single TypeScript file with the TypeScript Standalone option and it was successful. However, I also want to incorporate AngularJS into the mix. I've set up an index.html file and an app.ts file, along with importing angular.d.ts and angular.min.js into a script folder. Is there a way to do this using any of the TypEcs TypeScript debuggers? I've attempted to run it, but I encountered an error at var app = angular.module... (ReferenceError: angular is not defined).

I suspect that the angular.min.js file linked in the index file hasn't been loaded. Could this be due to app.ts being set as the main file in the TypeScript Standalone configuration? (As I'm unable to select the index.html) Are there any missing code or settings?

Your assistance would be greatly appreciated. Thank you in advance!

Below is an example of the code:

<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);
}

Answer №1

As Basarat pointed out, debugging in AngularJS and TypeScript can be done using the "TypeScript Web Remote" debug feature included in TypEcs.

Here's how you can debug the page:

  1. First, close all open Chrome windows.
  2. Open Chrome again using the command chrome.exe --remote-debugging-port=9222
  3. Set up a debug configuration by following the instructions at "Add TypeScript Debug for WebKit remote mode" on the TypEcs / 2.0 - New and Noteworthy page
  4. Open your start page (index.html) in the Chrome window from the previous step.
  5. Go to the debug view.
  6. Start debugging using the configuration from step 3.
  7. A dialog box will appear prompting you to select the tab containing the file you want to debug.
  8. You can now step through the code and add breakpoints to the app.ts file as needed. If you don't see the step options, click on the Main thread.

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

Answer №2

While I was successful in debugging a single TypeScript file using the TypeScript Standalone option, I am now facing a challenge with integrating AngularJS

The steps for debugging remain the same when using AngularJS. Make sure sourcemaps are enabled.

Encountering a ReferenceError: angular is not defined

If you are seeing this error, there might be an issue with your script tag for angular.min.js. Verify the file system and monitor browser network requests.

For further assistance, check out: webkit remote debug : https://bitbucket.org/axmor/typecs/wiki/2.0%20-%20New%20and%20Noteworthy

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encoding of URLs with hashes in AngularJS

When I have a link like http://localhost:8000/#?4047=27.20#4047, everything works fine when I paste it in and reload the page. Creating a link with <a href="{{ location.$$absUrl }}" target="_blank">same</a> also works without any issues. Howe ...

Tips for adding a placeholder to a datetime-local input field

I'm attempting to set a default value for datetime-local using the following code: <input type="datetime-local" ng-model="event.startdate" value="2016-10-09T15:38:00"> However, it doesn't seem to be working. Can someone please assist me ...

Tips for resolving the undefined error in TypeScript and React

Hey, I have this code snippet below which includes a call to the isSomeFunction method that returns true or false. However, there are times when the argument can be undefined. I only want to execute this function if selectedItems is not undefined. How can ...

Utilize string variables within TypeScript's enumeration feature

Can string variables be used in enums in TypeScript? Strings can be used in enum like so: enum AllDirections { TOP = 'top', BOTTOM = 'bottom', LEFT = 'left', RIGHT = 'right', } However, trying to use variab ...

Looking for a way to make this HTML tab appear using ng-show and an external variable in AngularJS - seeking guidance as a beginner!

Here is the HTML code snippet controlling the tab presentation: <li class="presentation" ng-show="currentUserAuthority == LIBRARIAN" > However, there seems to be an issue with the variable "currentUserAuthority" not updating until after the web pag ...

Infinity loop with AngularJS number input

I am facing an issue with a number input field where a function gets invoked whenever the number is increased or decreased: <input type="number" ng-model="amountOfInterval" ng-change="vm.changedAmountOfInterval(amountOfInterval)" /> However, this s ...

Getting rid of redundant elements in an array using Javascript or AngularJS

Case Study 1 A situation arises where an API I am using returns an array with duplicate values. var originalArray = [{id:1, value:23},{id:1, value:24},{id:1, value:22},{id:2, value:26},{id:3, value:26}]; //example Inquiry 1 -> How can I remove the du ...

Is the translation pipe in Angular 5 impure?

I'm currently utilizing ngx-translate. Can you tell me if the translation pipe is considered pure or impure? Also, would it be more beneficial to use the directive syntax translate="X" instead? ...

Leveraging angular.extend() with controllers and function overrides

Currently, I am working with Angular 1.4.8 and attempting to expand a controller. The original controller and the expanding controller are quite similar, but there is a specific function that I aim to replace in the extending controller. angular.module(&a ...

The $scope update within a function and using $apply does not seem to be functioning properly

One issue I am facing is updating the input value. I have a variable $scope.date_from which is shown in an input[type="date"]. My goal is to change the value by clicking a button. Below is my code snippet: $scope.update_date = function (date_from, date_to ...

Error encountered in AngularJS and JSON server: [$injector:unpr] An unidentified provider was found: $resourceProvider <- $resource <- menuFactory

Hello everyone, I recently created a small AngularJS application and utilized a JSON server for my backend operations. Unfortunately, I am encountering an issue with the provider in my code. Upon running it, I am receiving errors as shown below: Uncaugh ...

Is it possible to pass an AngularJS ng-form object as a parameter in ng-if?

When I try to preview, the save button in my preview mode remains enabled. You can view the code snippet here: http://plnkr.co/edit/I3n29LHP2Yotiw8vkW0i I believe this issue arises because the form object (testAddForm) is not accessible within the ng-if s ...

Tips for including <script> tags in Angular2

Is there a way to integrate the following script into my Angular page: <script> jQuery(function () { jQuery('#camera_wrap_1').camera({ transPeriod: 500, time: 3000, height: '490px', thumbnails: ...

What is the correct way to set up ng from npm as a standard CLI command?

While learning about NPM and Node.js, I have come across tutorials that use the ng package handler. It seems like they are able to run commands like ng serve directly from the command prompt without having to preface them with npm run. Is there something s ...

Unlocking the power of global JavaScript variables within an Angular 2 component

Below, you will find a global JavaScript variable that is defined. Note that @Url is an ASP.Net MVC html helper and it will be converted to a string value: <script> var rootVar = '@Url.Action("Index","Home",new { Area = ""}, null)'; Sy ...

Creating a TypeScript client to interact with React components integrated within an ASP.NET MVC web application

Can we automatically generate a TypeScript client to handle data transfer between a React component and an ASP.NET MVC controller? We have a TypeScript React app that communicates with an ASP.NET Core Web API using NSwag for TypeScript client generation. ...

Prevent memory leakage by utilizing Angular's $interval feature in countdown processes

I have a controller set up to handle a countdown feature: var addzero; addzero = function(number) { if (number < 10) { return '0' + number; } return number; }; angular.module('theapp').controller('TematicCountdownCo ...

Display JSX using the material-ui Button component when it is clicked

When I click on a material-ui button, I'm attempting to render JSX. Despite logging to the console when clicking, none of the JSX is being displayed. interface TileProps { address?: string; } const renderDisplayer = (address: string) => { ...

What are the steps to fix the "Webdriver cannot be resolved to a type" issue?

https://i.stack.imgur.com/ZkRlK.jpg I need help clearing and running my code. The error message "Webdriver cannot be resolved to a type" keeps popping up. Can someone assist me in resolving this issue? ...

The Angular 5 lifecycle hook ngOnChanges is triggered just once in a child component

I am struggling with syncing a child component containing complex input (such as chart data) with the API response received in the parent component in Angular 5. I am using the @Input() decorator to pass the chart data from the parent to the child componen ...