Angular support broken after updating to 2018.3

Title. Only html code is recognized in templates, not any angular or project specific tags, attributes or directives, can't bind to html attributes either ( [id]="*" is not allowed), no autocomplete or suggestions working either, string interpolation showing as plain text as well. Issue appeared after updating to 2018.3 without making any changes to settings. Google wasn't helpful, several people in the office are experiencing same issue, nobody knows how to fix it. Help please.

43 comments

please make sure that node_modules/@angular folder and subfolders are not marked excluded: Angular support requires including @angular packages in index

Please provide screenshot of the Project tree view with node_modules/@angular folder expanded, so that I can see what it looks like. Also, did you try invalidating caches?

-3

@angular and other supporting packages are marked as not excluded already and no settings were changed prior to these issues. The only thing that did change was phpstorm version update to 2018.3.

Yes, I did try invalidating caches, also tried re-installing angularjs plugin with no effects.

0

Please can you share your project? You can delete all your proprietary source files, I'm mainly interested in the project structure, configs and settings

0

Same problem, I ended up downgrading to 2018.2 through the Jetbrains toolbox. I can update it again to the latest version once this is figured out.

0

I ended up downgrading to 2018.2.6 and all issues went away. Going to stick to that version until this issue is resolved.

0

Sorry, guys, but it's still unclear what is wrong. Can the issue be recreated with a new cli project?

0

Hello there, I can confirm that I've lost all Angular Templating (.html files) support with the 2018.3 update. I will rollback to a previous version too. 

 

EDIT : Rollbacking to 2018.2.5 fixed the problem.

0

@all What IDE are you using (WebStorm, PhpStorm, IDEA?)? Can anybody share a project the issue can be reproduced with?

0

Finally reproduced, bug is tracked as https://youtrack.jetbrains.com/issue/WEB-36065; please feel free to vote for it

1

Of 3 people experiencing this issue at work 2 are using phpstorm and 1 is using webstorm. I did try starting several new projects using cli but none of them had this problem.

0

I am using PhpStorm with the AngularJS plugin.

I cannot share my project as it is a way too heavy, I am sorry.

0

The ticket says that this issue is fixed by version 2018.3.1. 

I installed this version today but I still have issues with resolving dependencies in some cases (I'm using Angular 4). For example when I'm using a *ngFor="let object of objects" it can't resolve the single object and its methods. 

0

If kit doesn't work for particular code constructions only, it must be a different issue.

But resolving in *ngFor="let ... works file for me:

Please provide files/code snippets that can be used to recreate the issue

0

I can confirm angular support it is still broken in PhpStorm 2018.3.1. Fix didn't work.

0

can you recreate the issue with any Angular project, or with some particular one?

0

Unfortunatly I can't provide the code snippets. But it could really have another reason than only the ngFor.

The used list contains objects that extend another object: e.g. objectB extends objectA. And objectB contains methods/functions that are used in HTML file. 

Further there's a pipe used that is ordering the list: *ngFor="let object of (objects | orderingPipe)".

0

Same issue here. My angular 6.x application resides in a subfolder.

I managed the debugging to work by pointing the local subfolder to the remote URL in the debug configuration.

But in the HTML templates the Inspector complains for "not allowed attributes" when I add stuff like *ngIf or [ngClass] etc.

When I open thesubfolder in a new editor window (like a new project) thus having the node_modules directory in the project root, PHPStorm detects all files and recognizes the attributes in angular templates as expected.

Maybe that helps for tracking down the problem

 

0

So in my case I found the node_modules/@angular package to be excluded - after including it again everything works fine now!

Sorry my fault!

1

Hello there, 

Here is a part of my project structure (I had to blur some directories names) :

As you can see I have multiple .idea folders (maybe this cause my project to lose Angular Support).

I can assure you that my @angular folder in node_modules is included.

I've also opened another angular project (without node_modules) and Angular Support is also broken, even if I had it working in previous PhpStorm versions.

0

>As you can see I have multiple .idea folders (maybe this cause my project to lose Angular Support)

Unlikely - the only .idea folder that is considered is the one located in current project root, others are ignored

>I've also opened another angular project (without node_modules) and Angular Support is also broken

Angular support won't work unless the @angular node_modules are there...

0

I am sorry but it still doesn't work properly on my end.

Maybe some logs could help me to figure out what's wrong ? Where can I find these ?

Any suggestion to clear my project from corrupted configuration (as it seems to be the case here) ? I've already tried invalidating cache then restarting and I even deleted my root .idea folder.

It is rather strange that just .html files are having an issue, everything else works fine. I really don't understand what could be wrong.

0

>Maybe some logs could help me to figure out what's wrong ? Where can I find these ?

you can check idea.log (https://intellij-support.jetbrains.com/hc/en-us/articles/207241085-Locating-IDE-log-files), but it will unlikely help if the issue is specific to certain project...

there are no configurations that affect this, having AngularJS plugin installed and enabled + @angular modules included is enough to make Angular support work.

One thing to check:

- close all files in your project, close the project, shut down the IDE

- restart, open the project, open one of your Angular .htmlfiles - is Angular support enabled?

0

> there are no configurations that affect this, having AngularJS plugin installed and enabled + @angular modules included is enough to make Angular support work.

And yet : 

I've tried to shutdown my IDE as you said: Angular Support is still not working in my html files.

Here are my current PhpStorm build infos (I did forget to mention that I am using macOS) : 

PhpStorm 2018.3.1
Build #PS-183.4588.67, built on December 5, 2018

JRE: 1.8.0_152-release-1343-b16 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.14.1

0

>I've tried to shutdown my IDE as you said: Angular Support is still not working in my html files.

this is not WEB-36065 then...

Unfortunately we have no chance to isolate the issue unless you provide a project that shows it up:(

0

One more thing to check: select your .html file in the Project tool window and hit Ctrl+Q (View | Quick Documentation) - what can you see? What is the reported 'Type' value?

0

Hello,

here is what i get on a random .html in my project : 

0

I'm having the same issue.

IntelliJ IDEA 2018.3.1 (Ultimate Edition)
Build #IU-183.4588.61, built on December 4, 2018
JRE: 1.8.0_152-release-1343-b16 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Linux 4.9.124-0.1.ac.198.73.329.metal1.x86_64

@angular directory is NOT excluded

HTML file is showing as HTML type

0

Please sign in to leave a comment.