How is Angular 2 supported in current development environments?

Angular 2 is already supported —to different degrees— in many current tools. We looked at the three major IDEs: Eclipse, NetBeans and IntelliJ IDEA (or WebStorm) and drew some conclusions about what works and what doesn’t.

Getting started with Angular 2 in IntelliJ IDEA

AngularJS has been around for a while and has proved to be one of the best frameworks for web development. Its successor, Angular 2, has not yet reached its 1.0 release, but is already seeing adoption. The tooling is also ready: the latest IntelliJ IDEA Ultimate (along with WebStorm, PhpStorm, PyCharm Professional, and RubyMine) brings extensive support for Angular 2 and TypeScript, which is the recommended language for Angular 2 projects.

We’d like to share some tips that will help you start working with Angular 2 projects in IntelliJ IDEA (and the other JetBrains IDEs mentioned above).

Before you start, make sure that the AngularJS plugin is installed in your IDE (you can do that in Preferences | Plugins), and Node.js and npm are installed on your computer.

Creating new Angular 2 project with Angular CLI

One of the easiest ways to get a boilerplate Angular 2 project is by using Angular CLI: it’s developed by the Angular team and is a recommended way to get the initial setup with all the required dependencies and configurations for a new Angular 2 project.

First you need to install Angular CLI globally via npm:

npm install -g angular-cli

Now on the IDE Welcome screen: click Create New Project, select Angular CLI under Static web, enter project name, click OK, and you’re ready to go.

Compiling your project

To compile your TypeScript project to JavaScript, you can either use an IntelliJ IDEA built-in TypeScript compiler (can be enabled in Preferences | Languages & Frameworks | TypeScript) or use Angular CLI command “ng serve”. In our sample project, it’s mapped to the “npm start” task in the package.json file, and you can run it in the terminal or from the IDE npm tool window.

“ng serve” will compile the files and run a local server on which you can preview the project. The app will be also live-reloaded in the browser on changes.

All the required compiler options are specified in the tsconfig.json file.

If you also check “Use experimental TypeScript service” in the IDE Preferences for TypeScript, IntelliJ IDEA will show you errors from the compiler right in the editor as well as in the TypeScript tool window.

Tip: For better performance, you may want to mark the project tmp folder generated by Angular CLI as Excluded. Right-click on it in the Project view and select Mark as Excluded.

Code completion, navigation and refactoring

Angular-specific code completion

One of the great advantages of using TypeScript is you get a coding experience similar to other typed languages such as Java. For example, IntelliJ IDEA can automatically import TypeScript symbols from other files and modules as you type.

The IDE will also provide you with Angular-specific code completion. Here are just a few examples.

In Angular templates, you’ll get completion suggestions for Angular-specific events (including custom event handlers defined with the @Output decorator) and property bindings, and works inside both:

Completion also works for methods defined in the component:

IntelliJ IDEA also brings a collection of popular Angular 2 code snippets. Type the abbreviation or select in from the code completion suggestions and press Tab to expand it. Keep using Tab to jump to the next edit point in it. The list of bundled snippets is available in Preferences | Editor | Live templated – Angular 2.

Navigating around the project

With Ctrl+click (or Cmd-click on OS X) you can navigate to the definition of any class, function, method, variable or component. The Go to class action (Ctrl+N on Windows and Linux, Cmd-O on OS X), familiar to most IntelliJ IDEA users, is also very useful when working with TypeScript.

Some Angular-specific navigation includes:

Navigation to the file from the path in styleURLs and templateURL .

Jumping to the component definition (to the @ Component where you have specified its name it the selector parameter) from its usage in the HTML file.

Navigation from a one-way binding in the component to the property defined using @Input in the component definition.

Refactoring Angular 2 components and methods

Refactoring options available in IntelliJ IDEA can be a real time saver.

For component names you can use Refactor – Rename. Press Ctrl-T on the tag or selector property in the component definition and then select Rename.

Rename also works for custom event handlers, class names and methods defined in the component.

For methods, there’s also the handy Change signature refactoring. Safe delete is another refactoring that will help you make sure no usages are left when deleting a method or class. Learn more about coding assistance for Angular 2 in this blog post.

Testing

For the client-side unit testing, we suggest using Karma. The project generated with Angular CLI comes with a Karma configuration file (see karma.config.js in the config folder), all the dependencies required for testing, and even a couple of sample tests in the src/app folder.

IntelliJ IDEA can be integrated with Karma via a dedicated plugin. Once you run the tests (right-click on karma.config.json and select Run), you’ll see the test results in a dedicated tool window where you can easily search and filter and navigate from the test name to its source. Read more about running Karma tests in this blog post.

We hope that with the advanced support for Angular 2 in IntelliJ IDEA, WebStorm and other JetBrains IDEs, getting started with this new framework will be a smooth experience for you.

Angular 2 in NetBeans

NetBeans is a good choice for those who wish to develop Angular 2 applications. It is an open source IDE which supports multiple languages (such as PHP, JavaScript, Java) and frameworks. You can download NetBeans from https://netbeans.org/. To develop Angular 2 applications, choose between the HTML5 Edition and the complete edition (“All”).

Angular 2 applications can be developed in any language translatable to JavaScript. This includes – naturally – JavaScript, Dart and TypeScript, among others. While the upcoming NetBeans 8.2 will have ES2015 support, most Angular 2 examples, docs and references are written in TypeScript. TypeScript is a superset of ES2015 and adds concepts such as typing, inheritance and decorators to ES2015 classes. Because mobile browsers do not fully support ES2015, transpilation/build is required anyway, so we can use TypeScript to help provide us with additional benefits over ES2015 which are especially relevant for larger applications.

Everlaw and its open source nbts plugin is responsible for contributing TypeScript support in NetBeans. To install the plugin into NetBeans, use the NetBeans Module (NBM) file from the release page at https://github.com/Everlaw/nbts/releases. Let’s see how that works:

The file can be installed in the NetBeans plugin manager (Tools → Plugins, select the tab Downloaded and click Add Plugins to add the TypeScript-NBM, then click Install to install the package).

The nbts plugin uses Microsoft’s original TypeScript compiler internally . Therefore, error messages from static code analysis or TypeDoc hints generated by the plugin are very similar if not exactly like the original compiler messages and TypeDoc generator. This is a nice feature as it results in coherent behavior between the IDE and the actual compilation process. Other IDEs which use their own implementations of a TypeScript compiler might suffer from discrepancies in behavior. A classic example would be an error in static type checking while having no error during the actual compilation process.

Required software

We will need Node.js and the node package manager (npm) for most development and test tools. On Ubuntu, it could look like this:

sudo apt-get install nodejs npm

Configuring them in NetBeans is straightforward: In the NetBeans settings (Tools → Options), choose “HTML5/JS” and click the search button for the “Node Path” as well as for the “npm Path”. The Node.js sources have to be downloaded if you want the NetBeans-Node.js support to operate normally. Use the “Download” button in the Node.js section to do this.

Setting up an Angular 2 project in NetBeans

To speed up the setup process, Angular 2 projects can be created using either a seed project or the Angular CLI. In this case, we use the Angular 2 quick-start source as a foundation for the project. To get started right away, use the sample project for this article from GitHub: https://github.com/codecoster/2016-angular-simple-rc4, which is based on Angular 2 RC4. After cloning the project, you can open it using the “Open Project” dialog (NetBeans will recognize folders with a ‘package.json’ file as HTML5/JavaScript project).

In the dialog, you have to specify the path to the project and click “Open” to open the project. In the “Projects” tab, you can right-click the project to install the npm dependencies, as shown in the picture.

To run the project in a browser, NetBeans needs to know which browser to use. This is done in NetBeans’ upper symbol bar. When you click the browser symbol, a menu will pop up. From this menu, you can choose Chromium for example.

Initializing the TypeScript compiler

To facilitate transpilation from TypeScript to ES5, a configuration file namedtsconfig.json is needed. It should be located in the site root, just like the package.json file.

The project root must be in the same location as the site root. This is done by right-clicking the project and choosing “Properties”. In the properties menu the entry for the site root is set to an empty value, as shown in the picture.

Angular 2 basics

Angular 2 is used to create performant HTML5/JavaScript applications. It is built on top of different JavaScript libraries, like RxJS or zone.js and provides a new abstraction layer for building custom components (@Component) and services (@Injectable). In Angular 2, services represent the logic, while the application itself is managed via its components.

Sample project

Our sample project consists of a simple component which can output the name that has to be inputted by the user via a corresponding input field. An additional button will be able to toggle between activating and deactivating the name output.

When filling in the input box, the app is showing the reactive behavior of Angular 2: for each letter typed into the input box, the output line above is immediately updated.

By clicking the button, the output line can be faded in or out. However, the state of the input box is still connected to the state of the application, so another click to the toggle button will reveal the name (and changes which may have happened to the input box).

Project structure

projectRoot/- tsconfig.json

- index.html

- systemjs.config.js

- karma.conf.js

- karma-test-shim.js

- app/

- main.ts

- simple.component.ts

- simple.component.spec.ts

- package.json

- node_modules/

- typings.json

- typings/



Besides the node_modules, as generated by “npm install”, the project contains the app folder. All application and testing logic can be found in this folder. The file “main.ts” contains the instructions necessary for bootstrapping the application. Inside “simple.component.ts”, the actual component is stored and inside “simple.component.spec.ts” the related unit tests are written. The main purpose of the files “index.html” and “systemjs.config.js” is to tell the browser which node_modules it has to load and how it has to configure the JavaScript environment. Also, the app is started within the HTML file by placing the root component in the HTML-body. It may happen that NetBeans does not recognize the custom component within the HTML document. Due to NetBeans’ strict HTML validator, warnings or error messages for the opening tag of the component will be the result of that. They ca be ignored. The files “karma.conf.js” and “karma-test-shim.js” provide support for Karma, which is the test runner for the unit tests. For all third-party libraries which should be used within a TypeScript project, but are not written in TypeScript themselves, typing information has to be provided. This is done via the typings command line interface, which works similar to npm and is configured via the “typings.json”. The installed typings are saved to the “typings” folder.

NetBeans TS f eatures

Developers requre good support from the IDE for effective application development. When developing TypeScript applications, NetBeans provides this support – in combination with the Everlaw plugin – for example by offering syntax highlighting, usages highlighting, error highlighting and code completion.

The plugin will check for errors, for example due to variables or functions that have not been imported.

Code completion is triggered as you type, but it can also be triggered manually in NetBeans with “Crtl+Space”.

Unique to the TypeScript support is the transpilation of TypeScript files into ES5 JavaScript files when saving the file. If you need to transpile all the files at the same time, this can be accomplished by triggering the corresponding npm-script. In NetBeans, right clicking the project and choosing the script will do the trick (here, “tsc” has to be called).

Because the plugin is in an early development phase, small glitches may happen at times. For example, it might happen that some error markers cannot be deleted, even though the error has been fixed. Most of these glitch can be fixed by restarting NetBeans.

Testing with NetBeans

NetBeans – in its HTML version – supports unit testing of JavaScript code and the test-runner Karma right out of the box. We just have to tell NetBeans which version of Karma it should use, in our case we use the karma-cli, as shown in the picture.

Karma-cli is a tool which helps you to automatically detect the version of karma used within a project. Karma is configured within the karma.conf.js file of the project. When this file is recognized in your project, NetBeans will enable its unit testing features. If you right-click your project and choose “Test”, your unit tests will get executed.

The status of the single test suites will be shown in the test-results window of NetBeans. A red label indicates a failed test, a green label indicates a passed test.

Controlling Karma can also be done by right-clicking the green “K” symbol below your project.

For example, a running Karma-Process can be stopped or the configuration file can be changed from here.

Conclusion and outlook

With the nbts plugin, NetBeans is well suited as an IDE for Angular 2 development. Basic features like syntax highlighting or code completion, as well as automatic transpilation from TypeScript to JavaScript are available; testing is also supported. An Angular 2 specific template support is currently missing.

Beneficial to the nbts plugin is the usage of the official TypeScript compiler for static code analysis and so on, as it yields similar errors and hints compared to the actual compilation process.

As development of the plugin continues, the remaining glitches will surely be smoothed out in later versions. Everyone is invited to take part in advancing the plugin, for example by adding pull requests to the GitHub project!

Angular 2 in Eclipse

Eclipse offers support for Angular 2 applications —developed by Eclipse committer Angelo Zerr, also know as the author of ternjs or AngularJS Eclipse plug-in based on tern.java.

Eclipse, Angular and TypeScript

A lot of people ask me how to support Angular 2 with AngularJS Eclipse. Angular 2 uses TypeScript (even if you could uses ES5, ES6 code, it is recommended to use TypeScript) and the configuration of an Angular 2 project is done with a (or several) tsconfig.json.

While I was studying ways to support TypeScript with ternjs, I discovered the awesome VSCode which supports TypeScript wonderfully. After studying the code, I learned that VSCode consumes tsserver to provide completion, hover, validation, etc for TypeScript inside VSCode editor. tsserver consumes TypeScript Service Language API and uses tsconfig.json files. If VSCode does that, why couldn’t Eclipse do that too?

That’s why I decided to try the same integration within Eclipse with typescript.java: It provides the fastest TypeScript Editor which performs well even with a big file. When you open a TypeScript file, the AST is not loaded, syntax coloration is done with Eclipse ITokenScanner and folding is carried out through indentation (like VSCode). Freeze should (hopefully) not occur. It also consumes the tsserver with async mean just like VSCode does. The only problem today is that Eclipse completion cannot be carried out with async mean. A more consuming tsserver gives you the capability to configure your TypeScript version.

TypeScript can be integrated just like VSCode — by using tsserver to support tsconfig.json and benefit from tsserver improvement. Since tsserver also supports JavaScript, it has its own JavaScript editor (Salsa). You can see in this TypeScript issue a demo with Angular 2:

Angular 2 Eclipse

Based on this TypeScript integration, the plug-in Angular 2 Eclipse is in this case fit for Angular 2. We’re looking at the current state of development and we are showing what’s now possible:

Eclipse JEE Neon

Angular2 Eclipse is based on Eclipse JEE Neon and uses features from the Eclipse Web Tools Platform (WTP). WTP JSON Editor provides the development environment with code completion for tslint.json, tsconfig.json, angular-cli.json and other data:

The WTP Validator ignores the errors of ng binding. With Neon, ng (click) attribute will not be marked as “Undefined attribute name (click)”.

2. TypeScript

As mentioned above, Angular 2 Eclipse is based on TypeScript IDE typescript.java to ensure support for TypeScript. The list covers completion, hover, hyperlink, outline:

3. Angular CLI integration

angular-cli, including functions such as Terminal and Wizards are integrated via Angular 2 Eclipse.

Launches becomes available in the Eclipse IDE with the aim to build projects and start a server.

4. HTML Editor

Angular 2 Eclipse extends the WTP HTML Editor to support Angular 2 syntax coloration, validation, completion inside the HTML editor.

This support is still very basic: it supports the DOM event/property bindings and the known directives like ngIf, etc, but doesn’t support custom application directives.

Conclusion

You can install Angular 2 Eclipse from the GitHub page but it is still in the development phase. A release could take place later this month or in September.

This release will include the features described in this article. In the next version, custom directive could be supported (completion, navigation, validation) once TypeScript extensibility issue is fixed (planned for TypeScript 2.1.0).