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.
Angular 2 support in IntelliJ, NetBeans and Eclipse
- Angular 2 with IntelliJ IDEA
- Angular 2 with NetBeans
- Angular 2 with Eclipse
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
“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 .
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
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.
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
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 named tsconfig.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
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).
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/
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”.
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
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
Beneficial to t he 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, 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.
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)”.
3. Angular CLI integration
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.
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).