Salient Soft

The aim of this was to get the tutorial up and running in a suitable IDE, such that I could debug and step through the code whilst understanding it. The tutorial site is here. The standard repository on Git is here.

A number of different IDE options where tried, and most of them hit problems and were therefore discounted. The options tried were as follows:-

Eclipse with the Angular 2 Eclipse plugin

The following links document how to set this up:-

http://fcorti.com/2016/08/22/angular-2-eclipse-how-to/

http://stackoverflow.com/questions/35890887/how-to-get-angular2-to-work-in-eclipse-with-typescript

When loading the Tour of Heroes tutorial, I tried to import it as a file system project as the cloned Git repo was not an ecplipse project.

The problems I hit with this were as follows:-

1. After importing into eclipse, there were compile errors on import and export statements in rollup.js.
2. The core problem appeared to be eclipse bug 496348 which was listed as resolved but judging by the comments at the end was still a problem.
3. I tried various ways around this, such as upgrading to a dev release of eclipse Neon, trying a prerelease of eclipse Oxygen, and upgrading the eclipse plugins. None of these solved the problem.
4. As this was not a very commonly used IDE, there was not that much in the way of online help. In particular, no-one appeared to have posted online about getting the Tour of Heroes demo working with it. Therefore, support etc. going forward would likely be a problem.

Webclipse

1. This is a paid for eclipse plugin, also available as a separate IDE on its own called Angular IDE, detailed   here.
2. I tried this also with Eclipse Neon and Oxygen, and received similar Typscript related errors that I could not eliminate when trying to load the Tour of Heroes demo. I therefore dumped this too.
3. Whilst I did not try IntelliJ/Webstorm at this stage, which was the Jetbrains/IntelliJ paid for option, one Stack Overflow comment (which I now cannot find) cited that there were still Typescript issues with it, even in IntelliJ. (With hindsight, I wish I had, as in the end I have standardising on it as it works both for this tutorial, which uses systemjs, and for applications generated via angular-cli which use webpack. Details on this stage of the journey here and here).

Visual Studio Code

1. This is the IDE I settled on at this stage. Whilst it meant learning another IDE, it had a number of overriding benefits.
2. Basically it just works with no problems and no wacky Typescript errors! The basic point here is that Microsoft originated Typescript, and they are the authors of VS Code, so unsurprisingly it has the best compatibility.
3. As it is probably the most commonly used IDE for Angular, unlike with the other IDE solutions, there are many examples online for it, including for the Tour of Heroes tutorial, which needs a custom launch.js file for running the demo.

The setup steps for it were as follows :-

1. Follow the initial steps including installation of the latest Node.js and npm from the Angular tutorial site here
2. Rob Lourens has forked the Tour of Heroes git repo here, with a custom launch.js file for launching in VS code. Clone that git repo and follow his instructions.
3. Note that this uses the VS Code debugger for Chrome extension, in order to allow browser run angular JS code to be debugged inside VS Code instead of in the Browser.
4. In order to get this working, I had to start the app from the command line first via npm i (to build) then npm start.
5. Also, initially I could not get VS code to connect to Chrome, either by running up a new chrome via Rob’s launch.js configuration “Launch localhost with sourcemaps”, or by connecting to an existing chrome using “Attach with sourcemaps”. The issue was that Chrome needed starting with a command line option to allow debug connections via its debug port. This is detailed here (comment by auchenberg) – the command line is C:\Program Files (x86)\Google\Chrome\Application\chrome.exe –remote-debugging-port=9222
6. Once the above was done, I could connect from VS code provided I tried to attach to the existing chrome using  “Attach with sourcemaps” – otherwise, a new chrome was started which did not allow debug connections!
7. The steps needed were therefore 1/ run (having built) using npm-start, 2/ run up a debug chrome, then 3/ click on the debug icon in VS code, select the  “Attach with sourcemaps” dropdown launch.js option, then hit the green go button just to the left of it. This successfully fired up the demo.
8. Note that I was able to breakpoint in the code using VS code either on the Typscript (.ts) files or the equivalent transpiled .js files. It appears that the compiled code is interspersed in the same folders as the Typescript, which does not seem cool at all – something to look into. I would expect that the build artifact code would be separate as in Java.

No Comments »