22 Aug

How to setup your Angular 2 development environment with Eclipse on Ubuntu

During the approach of Angular 2 I have found a nice official documentation about the language and how to develop the very first project. On the opposite, no official documentation seems to be developed yet, to describe how to setup the various and possibile Angular 2 development environments, in particular using Eclipse. Ok, Eclipse seems to be not elected as the “best” IDE to develop on Angular 2, but a lot of developers are using it. To cover this need I would like to share in this post, the step-by-step setup of the first Angular 2 project, using the famous IDE.

Disclaimer

As you probably know, Angular 2 is changing rapidly: weekly you can see things changed significantly. For this reason, this post could become dated according to the rapid changes of the tools, the languages, the best practices. I kindly recommend attention to the versions and please let me know if something is different, so I can update the post accordingly.

To make everything easier, I list below the precise versions of the languages and tools used to test the content of this post.

Ubuntu 16.04.01 LTS
Java v1.8.0_101 (command: java -version)
Nodejs v4.2.6 (command: node -v)
npm v3.5.2 (command: npm -v)
ng v1.0.0-beta.10 (command: ng version)
Eclipse J2EE Neon
Augury v1.0.5

Prerequisites

nodejsStarting from a vanilla installation of Ubuntu 16.04.01 LTS, let’s install Java 8 following this tutorial. Once Java 8 is successfully installed, it’s time to setup Node.js and npm, the package manager for JavaScript. For this purpose, open a terminal and execute the commands described below.

sudo apt-get install nodejs npm
sudo ln -s /usr/bin/nodejs /usr/bin/node

The installation should be performed with a high level permits, considering the system folders will be impacted. The second command creates a symbolic link to node command, from the default called nodejs.

Below we check the versions installed.

node -v
v4.2.6

npm -v
3.5.2

Angular 2 CLI

Now that Nodejs is correctly onboard, you could create manually your first Angular 2 project, following the great official tutorial detailed here. Instead of the manual development, we prefer to use the Angular2 client. To install it, open a terminal and execute the commands described below.

sudo npm install -g angular-cli

The installation could require some time so, in the meanwhile, please be patient and drink your preferred coffee (or tea). If some WARN messages will appear, no worries, every tutorial writes that everything is going well. Below we check the versions installed.

ng version
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.10
node: 4.2.6
os: linux x64

About the NodeWatcher issue, it seems to be not relevant for Ubuntu OS. You can take a look here for further details.

Now that the Angular2 client is correctly installed, you could create your first Angular 2 project, following the commands described below. Please note that everything is very straightforward even if the time required for the execution of the “new” command requires some patience.

ng new MY_PROJECT

cd MY_PROJECT

ng serve

Now that you project is correctly created you can open a web browser to the URL http://localhost:4200/.

Eclipse IDE

Instead of the project creation using the Angular2 client, we prefer to do it through the Eclipse IDE described below. To install Eclipse IDE is very straightforward: download the latest Eclipse IDE from here (in our case: Eclipse Neon), unzip it into your a preferred folder (in our case: eclipse folder into the Desktop) and execute eclipse script.

Once Eclipse is started, we need to install the Angular2 + TypeScript extensions using the project available here. To install the extensions, point on the upper menu and click on Help and then on Install new software....

Following the screenshot below, add the http://oss.opensagres.fr/angular2-eclipse/1.0.0-SNAPSHOT/ site, pressing the Add button on the upper right of the window.

angular2.screenshot.1

After the site is added, select Angular 2 IDE and TypeScript IDE as showed below. Then finalize the installation following the wizard and restarting Eclipse when it will be requested.
angular.screenshot.2

Creating your project

Now that Eclipse Neon is correctly installed, it’s time to create your Angular 2 project. To create it, point on the upper menu and click on File, then on New and finally on Other. Below the screenshot that describe what to do now.

angular.screenshot.3

Once the Next button is pushed, type your project name and then follow the wizard. Below the screenshot describing the task.
angular.screenshot.4

Once the creation task is done, Eclipse invokes the Angular 2 CLI, so the time required for the execution of the “new” command takes some time…. please wait!

Now that the project is created, it’s time to compile it and start it. In Angular this task is called: serve. Below the screenshot describing how to do it and the browser opened with your first Angular 2 project running.
angular.screenshot.5

angular.screenshot.6

If you would prefer to build the project in a dist folder, simply click on the build action instead of the serve action, and that’s all.

Debugging with Augury

Now that you Angular 2 development environment is up and running, with your first project created, it’s time to see how to debug your next changes to the source code. For this purpose Augury extension is the right tool. Augury is a Google Chrome/Chromium extension that will let you able to debug your Angular 2 code, directly into the browser.

To prepare the Angular 2 development environment for the client (the browser), we are going to install Chromium browser as initial task.

sudo apt-get install chromium-browser

Once the Chromium browser is installed, it’s time to check it as the default browser. To do it, open chromium (executing chromium-browser command from a terminal) and select Settings from the upper left icon, as described in the screenshot. After that, click on the default item button.

angular.screenshot.6_1

Now it’s time to install the Augury extension directly from the marketplace. The task is very straightforward and you can do it directly from the official web page. Below the screenshots describing the task.

angular.screenshot.7

angular.screenshot.8

Now that Augury extension is installed, you can serve the project again and access to the Angular 2 debug, following the screenshots below. The first shows the inspect item after the right click on the empty screen of the browser.

angular.screenshot.9

The second shows how to select the Augury extension to start debugging your source code. For further details about Augury, please take a look here.

angular.screenshot.10

Conclusion

In this post is shared how to setup the Angular 2 development environment with Eclipse IDE. The task is described using a step-by-step approach, tested on a Ubuntu 16.04.01 LTS. Please pay attention at the disclaimer paragraph, describing the fast changes that Angular 2 is having during this period that could affect the success of the tasks.

3 thoughts on “How to setup your Angular 2 development environment with Eclipse on Ubuntu

  1. This won’t work with recent Angular versions (as of April/2017) as angular-cli requires npm version > 6.

    How to install npm 6.x on Ubuntu:

    curl -sL https://deb.nodesource.com/setup_6.x -o nodesource_setup.sh
    sudo bash nodesource_setup.sh
    sudo apt-get install nodejs
    nodejs -v

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.