Angular 2 HTML template and TSLint issues

1. works fine for me:

Do you have AngularJS plugin installed and enabled? Also, do your have angular2 node modules in your project?

2. again, works for me. What problems using it have you faced? Does TSLint work for the same project when being run from the command line?

i just noticed that if I restart my IDE item 1 (in above list) is not a problem. I get autocompletion on component variables. But after 5 seconds it no longer works.

Thanks Elena

1) I do have the plugin installed, but I've noticed that the autocomplete in the HTML template stops working after IDE completes "scanning files to index" a few seconds after I open my IDE. 

2) In my VSCode the TSLint was working in the editor. For example, it was underlining code when I forgot to add a semi-colon at the end.

1. hmm... actually, completion should START working when indexing completes - it won't work until the index is built... Please can you attach screenshots that show up your issue?

2. you need to enable TSLint support in Settings | Languages & Frameworks | TypeScript | TSLint

Hi

1. After restarting my PC, directives are at least working, but component variables are not picked up (autocompleted).

See *ngIf structural directive successfully autocompleting.

See variable (myVar) NOT autocompleting.
(this article https://blog.jetbrains.com/webstorm/2016/04/angular-2-workflow-in-webstorm/ shows class members picked up in the HTML template so this should work.)

2. yes I have already done this without success whereas VSCode does this perfectly.

Ok, I think I sort of know what's going on here.

Item 2:

You can forget about this for now (not a big deal - I need to resolve a CLI bug before I'm certain that's an IDE bug)

Item 1:

Apparently class variables autocomplete provided that the HTML template is defined inline (i.e. within the @Component decorator). If I use a templateUrl, I get no autocompletion. Can you reproduce this?

Item2: looks as if some rules from your tslint.json are either not implemented or not installed

Item1: reproduced, please follow https://youtrack.jetbrains.com/issue/WEB-22168 for updates

Note that completion works if file template name matches component file name: card.component.ts and card.component.html, for example

Hi.

re-opening this issue because it is the same problem. (can also create new thread if that is better)

angular version: 2.0.1

idea ultimate version: IntelliJ IDEA 2016.2.5   Build #IU-162.2228.15, built on October 14, 2016

Autocompletion works for decorators:

it does NOT work for suggesting templateUrl:

it does work for directves:

it does NOT work for class variables and methods from html (both template and templateUrl):

i have angular and nodejs plugins installed.

i added node_modules to the JS libraries

What do i need to do?

Variables completion works fine for me:

from your screenshot it seems that you are creating HTML code using Live Template... Please can you clarify your steps?

As for templateURL, completion works for me as well, but shows files in the root rather than files in same folder:

But these are still files and not classes as in your screenshot

Please try invalidating caches - do the problems persist?

If yes, can you provide the project that shows up the issue?

hi, thanks for your answer.

1. i checked and indeed i do use live templates, although i am unsure why that matters

edit: without live templates code completion does not recognize directives like *ngIf

2. i tried invalidating caches:

shortly after start up, while the index is being built, code completion in template works:

but only there, not in the html file

After the indexing has finished, code completion does not work again in template as well.

3. for the temlateUrl target ("....html") suggestions still dont make sense

4. in case i screwed up some configuration i will clone the quickstart tutorial from angular 2: https://github.com/angular/quickstart/blob/master/README.md and report back.

edit: after direct cloning the quickstart i see the exact same problems: code completion does not work in html part (neither in template within the .ts nor in seperate html via templateUrl)

works for me using fresh quickstart:

can you provide your idea.log?

the part of the log of today evening

https://www.dropbox.com/s/ggw2o06lyw966ns/idea.log?dl=0

i just reinstalled the angular plugin to see if that makes a difference. two observations:

1. it is version 162.1447.3 (see https://plugins.jetbrains.com/plugin/6971?pr=idea ). too old?

2. while the plugin was uninstalled i checked what features of code completion i lose and it turns out: none.

*ngIf comes from live templates and @Component is still suggested

thus i conclude that the angular plugin was (and is) simply not working for me at all.

the plugin website states "2. Make sure that you have AngularJS/Angular 2 library files in your project (for example, in the node_modules folder) or AngularJS/Angular2 is configured as a JavaScript external library in the IDE as described here – this is required for the IDE to enable Angular support for this project. "

did i do that correctly?

1. No, it's up-to-date - I'm using the same plugin version; and your idea.log doesn't show up any issues related to Angular support

2. library settings look OK... Actually there is no need to add any libraries manually when using Angular2 - you just need to make sure to install all npm dependencies; Idea will automatically create a Javascript library for your node_modules

Can you zip your whole quickstart project (including .idea folder) and provide it to me, along with your settings (File | Export settings)?

here it is:

https://www.dropbox.com/s/twwrn11zpbu5uk3/temp.zip?dl=0

off topic: i sit in germany. where do you sit? from the times you post i guess american east coast?

Thanks!

to me, completion stil works for file in `templateURL`

as well as for variables in .html template:

the only issue is variable completion in embedded template - it shows bad choices. I was able to work out the issue by changing node_modules library scope - see this video: https://drive.google.com/file/d/0BxLtCMSdYqjQZGU0a1g2UE0td00/view

P.S. I'm in Russia, UTC+03:00. We also have the office in Germany, BTW - it's in Munich

Just checked your app in Idea 2016.3 EAP (https://confluence.jetbrains.com/display/IDEADEV/IDEA+2016.3+EAP) - works better than 2016.2.5: now I can finally see .html templates located in the same folder when I invoke completion in `templateUrl`:

Can you try the EAP?

Hi,

well cheers to russia then :)

now: yay, it works with EAP 2016.3 !

(i will further investigate whether this was because i screwed up some config in 2016.2. if i find something i will report back)

what i observe however:

if the component defines the variable as private and the html uses it, then usages are not found and renaming does not cover both.

that is a minor problem however.

Cheers and thank you !

Reproduced, thank you! But, AFAIK, using private variables in templates is not correct (see the answer in Angular2 Google Group: https://groups.google.com/forum/#!msg/angular/D_O_1fqA9WQ/pRNQARRiBgAJ) and should be prohibited. We will likely remove them from completion and show warning on attempt to use them

that link was illuminating. i will make several variables and function public in my project now ....

anyway: i have a suspicion as to why the angular plugin is not working for my idea 2016.2.5

as you can see here the .js and .map.js files are not showing in the project directory.

i remember spending some time a few months back (it was angular 2 beta still) to actively not show these files, as they were just cluddering up the directory.

in the EAP they are "hidden" like in your screenshot above https://intellij-support.jetbrains.com/hc/en-us/community/posts/207638905-Angular-2-HTML-template-and-TSLint-issues?page=1#community_comment_203896544, so they do not disturb

now i do not remember HOW i hid the .js and .map.js files. but maybe that is the problem?

so: how can i show the .js and .map.js files in my project directory in 2016.2.5 ?

found another "bug":

template syntax for directives is marked with a warning that it is not allowed.

known issue, please vote for https://youtrack.jetbrains.com/issue/WEB-22386

final update:

the reason why the angularjs plugin was not working in 2016.2.5 was indeed the ignored .js and .js.map files:

i had added "*.js;*.js.map;" here:

 after removing these two ignores it works fine.

Cheers and thanks for your help. Keep the good work going !

I see, thanks for update:) Ignoring .js files would indeed disable Angular support, as required dependencies can't be indexed:)