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.
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:
Nodejs v4.2.6 (command:
npm v3.5.2 (command:
ng v1.0.0-beta.10 (command:
Eclipse J2EE Neon
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
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
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
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.
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.
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.
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.
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.
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.
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.