CODEWITHSUNDEEP
angularjsnode.jsnetbeansangular
user2748531
user2748531

Reputation: 1453

How can I use Angular 2 with NetBeans?

I have tried every tutorial I could find to try to make a HTML/JS project with Angular 2 working on NetBeans, but none have worked. Maybe is my npm that is bugged (search, for example, doesn't work).

The node_modules folder that is created with npm install is grey on NetBeans and have some errors in some files (I don't know if this is normal). Any .js I try to import from node_modules folder gives the error Failed to load resource: net::ERR_EMPTY_RESPONSE / Uncaught ReferenceError: System is not defined.

Does anyone have any idea what could I be doing wrong? Or does anyone knows any tutorial that have the code to download so I can compare with what I'm doing and see what is the correct? Every tutorial I have found doesn't have any code to download, just some pieces of codes in the page for explanation. Sory if this isn't a good question, but I have been trying to make this work since yesterday without success and I'm completely out of idea.

Upvotes: 3

Views: 14637

Answers (2)

80sax
80sax

Reputation: 582

First I recommend to upgrade to the last version of NodeJS and NPM, to minimize the errors in your node_modules folder

Install the Everlaw's Typescript plugin from https://github.com/Everlaw/nbts/releases . If you are using Netbeans 8.1 I think you can install it directly from the Plugins installer. I'm using NetBeans 8.2 and there is no problems installing the plugin manually.

Then on NetBeans go to Tools -> Options -> HTML/JS -> Node.js and write the right Node and NPM Paths and Sources, I would recommend check-on the three check-boxes in that panel.

For a quick start try the QuickStart demo from the angular.io page, it is not necessary make any change in the package.json. The first time I tried to debug an Angular 2 application I put the index.html file directly in the project folder in order to do not make any changes in the index.html script sources nor change the project files structure but you need to change some properties of the project:

  • In the project window right click the project and select properties.
  • In sources change the Site Root Folder using the Browse button and select the project folder (You can ignore the warning that appears).
  • In Run select Run As: Web Application.
  • I recommend select Browser: Chrome with NetBeans Connector
  • Using the Browse button go to the project folder and select index.html as your Start File.
  • Select Web Server: Embedded Lightweight.
  • And finally in Web Root write /Your_Project_Folder

run npm install from NetBeans

Click the run button and your web application must open in chrome, if you edit your html or typescript files and save them you could see the changes in the browser in real time without re-debuggind your application and can use the Browser DOM window to explore your elements created from Angular 2.

You still see some errors in your files because NetBeans is not fully compatible with the HTML Angularized syntax. But it runs flawlessly.

You can also run the start script directly from Netbeans to run your project using lite-Server.

Screenshot NetBeans - Angular 2

Upvotes: 8

slaesh
slaesh

Reputation: 16917

I would recommend you to install the angular cli: npm install -g angular-cli@webpack

Fore more infos regarding this tool, take a look here: https://cli.angular.io/

Then create a new Angular2 app with ng new <app-name>

This will create a complete and working Angular2 application in the current folder.

cd <app-name> and start the app with ng serve.

Check your new created app in your browser on localhost:4200.

If this works, you can try to get started with your NetBeans! :)

Upvotes: 1

Related Questions