Menu
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);
}
790
Debug a TypeScript file If you typed the filename explicitly, select the file in the Project tool window or open it in the editor and then select Debug <run/debug configuration>. next to the list or press Shift+F9 .
As soon as the Angular plugin is installed into your Eclipse IDE, you can use its new project wizard to generate your first Angular application using the Angular CLI. While your project is being created, the new Terminal+ view will appear.
If you're using Chrome, we can use a shortcut with the developer tools. Simply find the element you're interested in, right click on it in the browser, and select inspect element. The element itself is stored as the $0 variable, and we can fetch the Angular-ized element by calling: angular. element($0) .
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:
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.
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
