[Glenn Puckett]

I have recently installed WebClipse into my Eclipse Neon IDE. I already have a project that has been underdevelopment for nearly a year. My group took over about 3 months ago after the former group was “re-tasked”. It is finding tons of errors, 362 Angular 2 Template Problems. The vast majority of these errors a “Identifier ‘xxxx’ is not defined. The identifier is indeed there and the project builds and executes without issue. There are so many errors like this I can’t begin to determine when I have a real problem that I need to address without re-building the project and fixing what it finds.

Here is an example:

I have a typescript file that contains

    public editModeFlags: Object = {
        archivePurge: false,
        zones: false,
        smtp: false
    };

In the HTML template I have

<div class="widget-toolbar" *ngIf="editModeFlags.archivePurge">

But WebClipse gives me the following

Identifier ‘archivePurge’ is not defined. ‘Object’ does not contain such a member

Another example

I have the following input field in an HTML template

<input class="form-control" type="text" id="smtpHostname" name="smtpHostname" required
     [(ngModel)]="smtpHostname.value" 
     pattern="{{smtpHostname.validation}}" 
    #smtpHostnameInput="ngModel" />
<div [hidden]="smtpHostnameInput.valid || smtpHostnameInput.pristine"
     class="alert alert-danger" style="position: absolute; z-index: 1001;">Required
</div>

I get the following errors

Identifier ‘pristine’ is not defined. ‘NgModel’ does not contain such a member
Identifier ‘valid’ is not defined. ‘NgModel’ does not contain such a member

So how do I go about cleaning up the code or telling WebClipse not to flag these field?

• This topic was modified 7 years, 12 months ago by Glenn Puckett.
• This topic was modified 7 years, 12 months ago by Glenn Puckett.
• This topic was modified 7 years, 12 months ago by Glenn Puckett.

[support-piotr]

Hi Glen!

Thanks for trying out Angular 2 support! Based on the information you’ve provided, the first error we’re showing is correct. The type of your variable is specified as “Object” and “Object” really does not have such fields. If you try to write TypeScript code you will get similar error on “archivePurge”. Try for instance this.editModeFlags.archivePurge = true – “archivePurge” will be validated with error by tsc.

However, the code will run in the runtime, because as with TypeScript, types exist only during development/compilation time. Angular2 runtime template compilation does not perform any type checks, but you could run into issues using the Ahead of Time (offline) Angular 2 compiler. Our policy is to do the same level of type checking as is done by TypeScript, so that real problems are picked up.

The solution for your problem is to just simply remove “:Object” type declaration and let TypeScript infer the type. In other cases where you do not assign value on initialize to the field, just change the type to “any” which virtually allows to access any property.

Let me know if this works for you!

As far as the other example, this seems to be manifestation of our limited support for form elements. The error is really invalid and I am sorry for this! We are currently working on improving support in this area. You can expect the fix to come out in the next release of Webclipse.

Please let me know, if you have another types of false negative errors as well, so that I can assist you with them immediately. We really appreciate your feedback!

Best regards,
Piotr Tomiak
MyEclipse and Webclipse Product Architect.

[ber000]

The problem is Angular 4 form validation management is using dynamic error codes. The current tutorial at Angular site uses code showing an error with Webclipse:
https://angular.io/guide/form-validation
<div *ngIf=”name.errors.minlength”>
Name must be at least 4 characters long.
</div>

The code above shows an error despite it’s quite valid because it means :
<div *ngIf=”name.errors[‘minlength’]”>
Name must be at least 4 characters long.
</div>

The solution to use the type ‘any’ seems not possible in this case because the code is based on Typescript classes provided with Angular 4.

Is there any way with Webclipse to allows the shortcut notation name.errors.minlength but not allow something like name.wrongfield.minlength? It’s because name[‘wrongfield’].minlength is suspicious for Typescript code but not name.errors[‘minlength’] so not name.errors.minlength.

I quote that in current version of Visual Studio Code the Typescript is very well managed but it seems not validate such code in html, so it doesn’t show/manage such case.

[support-swapna]

ber000,

Sorry that you are seeing this issue.

I have imported the reactive and template-driven example project discussed here as Angular project to 2017 CI 7 and I do see the validation problems you reported.

We have recently released a prerelease build of CI 8 and I do not see those validation errors in the prerelease build.

If possible, can you please try the prerelease build and check if the validation issues persist?
Please refer to this FAQ to configure the prerelease stream : https://www.genuitec.com/forums/topic/webclipse-angular-ide-prerelease-stream/

If you are seeing the validation problems in the prerelease build as well, then please let us know whether you are working with Webclipse or Angular IDE. Also share the Version and Build Id from menu Window > Preferences > Webclipse for further investigation.

Apologies for inconvenience caused. Please let us know how it works.

–Swapna
MyEclipse Support

[simron-singhgmail-com]

Hi Swapna,

I am still facing same error ‘*ngIf=”name.errors.minlength”’ even after upgrading to new version as per the link you shared. Can you please guide where I might be doing something wrong.

Thanks, Simron

[ber000]

@swapna: I was using the latest stable release of last week. So a CI 7 of Webclipse with Neon 2.

I backup the eclipse install with Webclipse but I get back to a version without Webclipse because I wanted now a production version with some Typescript and angular 4 support, even if minimal.

Thanks for the information, it’s cool that it’s been fixed. From tests Webclipse is from far potentially the best Angular 4 project eclipse solution, so for sure I’ll come back test Webclipse when the CI 8 will be released.

[ber000]

I took back an eclipse Neon 2 Installation with Webclipse CI 7. Updated all through eclipse, so got a Neon 3 installation.

Then tried follow instruction at: https://www.genuitec.com/forums/topic/webclipse-angular-ide-prerelease-stream/

But Help > Webclipse > Check for Updates didn’t triggered any update. I took the update url in the json for the pre releases and added it in Eclipse Available Softwares Sites (Help > Install New Software > Eclipse Available Softwares Sites > Add >
And added the temporary url in the json (http://…/wc2017ci8)

Then updated through eclipse Help > Check for updates

And this time I had updates proposed that seem related to Webclipse, installed them.

After that like simron it didn’t removed the problem, and I still had the error for *ngIf=”name.errors.minlength” (Identifier ‘minlength’ is not recognized)

But then checked :
– Windows > Preferences > Webclipse : Version shown CI7 1.8.4.201…
– Help > Installation Details : Webclipse Suite shown 1.8.4.201…

It looks like it’s not easy to switch to a CI8 pre release stream.

• This reply was modified 7 years, 2 months ago by ber000.

[Brian Fernandes]

ber000,

Until the final release of CI 8, the preference page will continue to say CI 7, sorry about that confusion. If you do have version 1.8.4, that would indicate that you do have the CI 8 prerelease (CI 7 was 1.8.3) – however, we made several pre-releases of CI 8, so the fully qualified version would let us know that you are on the right one (unlikely that you wouldn’t be, if you performed the steps you stated above).

It’s odd that the steps suggested in the linked forum post did not work for you, but since you are already on the pre-release, we’ll ignore that issue for now.

1) Could you give us the fully qualified version?
2) Could you do a Project > Clean action for the project and see if the error disappears?
3) Finally, the error you see, is that showing up only in the editor (as a squiggly red line) or do you see it in the Markers/Problems view as well?

[ber000]

@Brian:
=> Wbeclipse version :
Webclipse Suite 1.8.4.201709041115 com.genuitec.eclipse.webclipse.suite.feature.group Genuitec, LLC

=> Eclipse version:
Eclipse Java EE IDE for Web Developers.
Version: Neon.3 Release (4.6.3)
Build id: 20170314-1500

For this extract of template code :
<small class=”form-text text-danger” *ngIf=”confirmPasswordInput.errors[‘required’]”>
Your confirmation password is required.
</small>
<small class=”form-text text-danger” *ngIf=”confirmPasswordInput.errors.required”>
Your confirmation password is required to be at least 4 characters.
</small>

Project > Clean > Clean all projects > OK.

I have no error for “confirmPasswordInput.errors[‘required’]”

EDITED: I have an error for *ngIf=”confirmPasswordInput.errors.required”
The error appears in both Markers and Problems views, it is:
Description Resource Path Location Type
Identifier ‘maxlength’ is not defined. ‘__type’ does not contain such a member password.component.html /myproject/src/main/webapp/app/account/password line 0 Angular Template Problem

It’s right that the Typescript type hasn’t the field maxlength. But this code also means confirmPasswordInput.errors[‘required’]

And I think that it shouldn’t be tagged as an error, or at least there should be an option to ignore this case as an error.

EDIT: Post edited, I have been interrupted when writing the post 🙂 and posted it with some incomplete information. Now it’s fixed.

• This reply was modified 7 years, 2 months ago by ber000.
• This reply was modified 7 years, 2 months ago by ber000.
• This reply was modified 7 years, 2 months ago by ber000.

[Brian Fernandes]

ber000,

Sorry for the delayed response – we’ve been able to replicate the issues you mention and will be looking into them for the CI 9 release. Appreciate the very detailed reports.

[ber000]

Brian: You are welcome. 🙂

What’s missing is the ability to enable/disable “Angular Template” Validation (or it could be named “Webclipse Angular Template”) in the general validation setup (Windows > Preferences > Validation, or the setup per project).

[Brian Fernandes]

ber000,

While we did not add the ability to disable the validators independently (that request is being tracked) – the specific validation problem in the template has been fixed for the 2017 CI 9 release, that’s due in the next few days.

We did put out a pre-release of CI 9 which does contain this fix, so if you would like to try it out immediately, please follow the instructions in this thread: https://www.genuitec.com/forums/topic/webclipse-angular-ide-prerelease-stream/

If you do try out the pre release, do let us know if your issue was fixed, if not, we’ll hopefully be able to correct it before the final release.

[support-swapna]

ber000,

Webclipse 2017 CI 9 is out with the fix for validation problem in the template. Please go to Help > Webclipse > Check for Updates, update to CI 9 and let us know how it works for you.

–Swapna
MyEclipse Support

[Raul]

Hi swapna

Thank you for the update.

I’m trying to update from Webclipse 2017 CI8 (see attached screenshot) to CI 9, via “Help > Webclipse > Check for Updates”, but this does not trigger any update.

My Eclipse is Neon.3 Release (4.6.3).

Is there any other site different than http://www.genuitec.com/updates/webclipse/ci/?

Regards,

Raúl

Attachments:

You must be logged in to view attached files.

[support-swapna]

Raul,

Sorry that you are seeing problems with the CI update.The Webclipse update site remains same, no changes on that front. It is possible that the updates are already downloaded automatically. Can you please restart the IDE and check if you see the updates being applied?

If no, then please try the Check for Updates once again and see if any errors are logged in the Error Log view. If there are errors logged, then please share with us the .log file located at workspace dir/.metadata/.log along with the OS and version details for further investigation.

Apologies for inconvenience caused. Please let us know how it works.

–Swapna
MyEclipse Support

[Author]

Posts