For every development project there has to set working environment to increase productivity. This tutorial focuses on configuring Netbeans (a versatile IDE for development) for Angular 2 development on Windows machines.
To start this we need to download latest version of Netbeans, that is 8.2 at the time of writing this tutorial. You need to download
Next thing is to download
and install Node.js latest version i.e. 7.2.0. Installing is simple and straight forward it will automatically put node and npm in windows PATH variable.
Next we need to download
and install git client for windows.
Now open cmd window and execute following command one after the other
npm install -g bower
npm install -g typescript
Now launch Netbeans goto Tools → Options → HTML/JS (tab) → Node.js (tab) and match you configuration according to the below image.
If Node.js is properly installed Netbeans with automatically pick Node Path and npm Path. Press the download button show as number "2" in the image netbeans will automatically download the source for Node.js. It you look at the first tab the Bower Path to bower.cmd will also be automatically picked up.
Now we need to configure to TypeScript with netbeans for this we have to download
a netbeans plugin from github by Everlaw. Current version is v184.108.40.206. To install the downloaded plugin go to Tools → Plugins → Downloaded (tab) → Add Plugins (button) browse and install the plugin it will be something like the image below.
We are all set to get started with our Hello World Application. To do so the best starting Application is the one that is provided on Angular 2 website. On netbeans go to Team → Git → Clone... In the repository URL Specify
and click Next. On Remote Branches check
and click Next. Select Parent Directory and Clone Name to Angular2HelloWorld and click Finish. When Import was finished open the project. You can also rename project name by Right Click → Rename...
There are lot of errors in the project to remove those Right Click → Properties and select TypeScript and check Compile on Save.
in project files and replace it with the following.
"lib": [ "es2015", "dom" ],
To Resolve renaming problems with out project Right Click on Project → Resolve Problem and Click Resolve button
Now Right Click on Project → npm Scripts → start
Browser will open and display the message you mentioned in