Created attachment 158965 [details]
Screenshots of Angular 2 validation issues

Zip containing four screenshots of validation issues in Netbeans with Angular 2

The IDE is Netbeans IDE 8.1

After beginning tutorials for Angular 2, I have added some screenshots of issues in how Netbeans validates files incorrectly for Angular2 with Typescript

The IDE has a custom TypeScript Plugin to help with File creation (optional compiling/transpiling) and syntax highlighting issues, but code validation issues are widespread, and changes are needed in the HTML validator (custom tags provided by Angular.js/.ts code is marked as invalid) as well as the way JavaScript and JSON files are validated, including widespread complaints about code within common node_modules

A Further issue is that the node.js templates create a public directory, but both the live-server and lightweight Netbeans server fail to find the node_modules without undefined modifications as they are in a parent folder*

This is possibly unless bower init is executed (but I cannot be sure of the causes of when it works inside public, and when it doesn't work inside public)

It's difficult to understand the behaviour completely, as to why in some cases it has worked but by default it doesn't even using the netbeans project templates with the npm package manager

This is Netbeans 8.1 on Windows 10 x64

With the existing TypeScript community plugin the most important feature would be template syntax support.
If ES6 should be supported as well, adding support for the angular2 libraries would be required as well, but it looks like TypeScript is the lingua franca for Angular 2.

Created attachment 159534 [details]
HTML template errors

Also there are validation errors for Angular's commands in html templates - please see attachment.

Have exact the same problem, if you support angular2 for JS, please support Angular2 in HTML too. Both works hand in hand. I can add such attributes to the custom.json file but the errors will not disappear.

I would be happy even with just the templates being properly highlighted.

Add support for angular 2 templates (remove errors and make sure that format operation works correctly)
Add in-build support for Typescript 2
Add support for webpack 2
Add support for running nodejs project inside java web application.

(In reply to DaltonNotetech from comment #9)
> Add support for angular 2 templates (remove errors and make sure that format
> operation works correctly)
> Add in-build support for Typescript 2
> Add support for webpack 2
> Add support for running nodejs project inside java web application.

Please create separate tickets for webpack 2 and the nodejs thing for java web apps, this has nothing todo with this ticket and should be separate.

Here you can find the TypeScript plugin: https://github.com/Everlaw/nbts. This brings TypeScript to NetBeans, if you have problems or feature requests, please file tickets there.

I use the TypeScript Plugin in combinement with gulp to generate source-mapping files. Works good but I see some lacks...

1) Missing debugger support
You can start the debugger, but there is no connection/mapping to the original .ts file. So if you need that, you have to use an external tool, for example Chrome browser.

2) tsconfig.json location limitations
You have to locate tsconfig.json in the source folder of the *.ts files. That's for my point of view the wrong place, because it is part of the build configuration and not part of the project sources.

My recommendation would be:
a) create a subfolder 'src' fpr the *.ts files
b) locate tsconfig.conf in the project base directory (same location like files gulpfile.js, ...)
c) show the files under the category "Important Files" (like gulpfile or package.json)

(In reply to ms2701 from comment #11)
> I use the TypeScript Plugin in combinement with gulp to generate
> source-mapping files. Works good but I see some lacks...
> 
> 1) Missing debugger support
> You can start the debugger, but there is no connection/mapping to the
> original .ts file. So if you need that, you have to use an external tool,
> for example Chrome browser.
> 
> 2) tsconfig.json location limitations
> You have to locate tsconfig.json in the source folder of the *.ts files.
> That's for my point of view the wrong place, because it is part of the build
> configuration and not part of the project sources.
> 
> My recommendation would be:
> a) create a subfolder 'src' fpr the *.ts files
> b) locate tsconfig.conf in the project base directory (same location like
> files gulpfile.js, ...)
> c) show the files under the category "Important Files" (like gulpfile or
> package.json)

The TypeScript plugin is a 3rd-party-plugin. Please file those bugs here as 3 different tickets: https://github.com/Everlaw/nbts/issues

Ok. See..
  https://github.com/Everlaw/nbts/issues/9
  https://github.com/Everlaw/nbts/issues/21
  https://github.com/Everlaw/nbts/issues/28

But it would make sense to include the ability to handle TypeScript, ... in the official HTML 5 Kit of Netbeans (maybe version 9). In the mean time many thanks to the maintainer of the 3-rd-party-plugin.

There was a internal discussion about to implement TypeScript natively into NetBeans but I don't know how it ends. And the problem is who will maintains it? ;) So we will see.

The TypeScript support by everlaw is 'ok', I think it is great that they use the official Microsoft backend so maintenance burden is shifted (at least somewhat) towards the outside.
But this is only part of the picture: TypeScript alone is not sufficient for Angular development or other extension toolkits/frameworks/libraries: Accessing variables/types inside html templates, code completion etc. would be required to be at least somewhat on par with other IDEs. I really believe TypeScript, Angular are the most important building blocks for web development during the foreseeable future.

Please we need NetBeans to fully support Angular2 code without showing error. Other functionalities are great.
Thanks

At least add the following features as a quick fix.

Please automatically add all core angular attributes/tags to customs.json so that angular templates become error free. Also make sure that addition of custom element/attribute does not cause any formatting issue (Not format operation is not working properly with custom elements/attributes).

Sorry NB, had to switch to switch to IJ after like 10 years, the effectivity matters. I'll love to see Angular 2 & improved TS support in NB.
Sorry for cluttering bugzilla with this unhelpful comment but take it as "this is #1 priority for some" :)

This is really a pain in the ass to have the HTML fully in red somtimes if you use the angular2 syntax.

I assume this issue would be best implemented using the language server protocol as there is language server support for both TypeScript (imho used by the everlaw plugin for NBTS) and Angular template syntax support as well.

* http://langserver.org/
* https://github.com/angular/vscode-ng-language-service

Angular 4 is already released and pretty soon people will start migrating to it.
Netbeans should get the support for Angular's latest version ASAP along with typescript as it will help Netbeans to get wider user base.
Java EE + Angular can be very good stack if netbeans can support Angular in better ways.

(In reply to ChrisLE from comment #19)
> This is really a pain in the ass to have the HTML fully in red somtimes if
> you use the angular2 syntax.

Indeed

I created a ticket here: https://issues.apache.org/jira/browse/NETBEANS-50 maybe we should close this ticket? I didn't follow the whole ticket, but what I can say, it is more or less about the syntax errors in html files, right? Maybe code completion for keywords in angular. So please create an other ticket there and feel free to discuss it in my ticket.


Regards

As mentioned before, comment to this ticket: https://issues.apache.org/jira/browse/NETBEANS-50 or create a new one for other stuff, which is not related to this one.