Angular component navigation doesn't work anymore (webstorm)
The navigation to component TS files by cmd/ctrl-clicking on the component or methods or variables in the template file just stopped working. Like in, yesterday it worked and today it doesn't. Without any changes to settings or similar things. My colleague also using Webstorm also report erratic behaviour for component navigation. My colleague using IntelliJ doesn't report this issue.
A similar post has including node_modules as a solution, but this doesn't work for me and it has never been an issue before.
I've tried updating to the latest Webstorm version to no avail (see build info below).
The components are currenlty highlighted as unknown html element.
WebStorm 2017.2.5
Build #WS-172.4343.25, built on October 20, 2017
JRE: 1.8.0_152-release-915-b12 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Mac OS X 10.12.6
Please sign in to leave a comment.
Please try invalidating caches (File | Invalidate caches, Invalidate and restart) - does the problem persist? Do you have @angular node_modules installed and included in project?
The problem persists after invalidating caches.
I have node_modules currently excluded from my project. But like I said in my post, I tried including them and it didn't make any difference and I haven't had this problem before even though I've had node_modules set as excluded for almost a year now.
> I haven't had this problem before even though I've had node_modules set as excluded for almost a year now.
Sorry, but it can't be true. if `@angular` module is excluded, Angular support is disabled. Please make sure that it's included in project
It so happens to be true.
My two colleagues ( one using Webstorm, the other using IntelliJ ) have the exact same settings with node_modules excluded and they're not reporting any issues (just the webstorm colleague saying he has also had the issue before).
But what do you know! It's working again! And I didn't do a thing, except maybe closing closing my macbook for a few hours. It apparently did what five Webstorm restarts couldn't do.
But I still have node_modules excluded in all my directories.
>But I still have node_modules excluded in all my directories.
Please attach a screenshot of your Project tool window so that I can see what node_modules look like there
OMG, I see in order to make navigation work you have to include node_modules into the project.
It’s quite pity since it drastically slows down PhpStorm.
Is there a way to improve the AngularJS plugin somehow to make it work without node_modules included?
> Please attach a screenshot of your Project tool window so that I can see what node_modules look like there
All client directories form an Angular app with the common- and components-library at their core (shared with permlinks).
I've excluded all subdirectories except the src directory. This is the same across all directories.
The cross navigation is working fine now. And like I said, the only thing I did was closing my laptop and opening it again a few hours later in the evening.
@Evgeny @angular node_modules are REQUIRED to be included to make Angular support work. And no, nothing will be ever changed here - without the libraries, you can't expect completion/navigation/etc. to work
Angular support works fine here with node_modules excluded.
You must have the module included somehow
I've included node_modules. Now, usage looking and refactoring completion demands minutes. Not always though.
What can be done to improve the speed of looking for usage?
Currently I excluded all the node_module except of @angular.
Navigation through angular objects works, refactoring and looking for usage works fast as usual.
After running into this problem again, where component navigation suddenly did not work in HTML files, although it still worked in TS files and I did not have any problems for 2 months, I "not excluded" my @angular directory in my node_modules.
This seemed to fix my problem. Hopefully, this solution will make Webstorm a bit more stable for me.
Thanks for the idea Evgeny.
This issue has returned for me.
The custom angular components are no longer clickable from my template.
The issue has returned since I updated from the latest 2019 version to the 2020.1 version.
I've tried several things which are also mentioned above:
1. Invalidating cache
2. Restarting my computer
3. Keeping my computer shut down for a full night
4. Including entire node_modules directory in the index
5. Excluding node_modules and only including the @angular directory in the node_modules
6. Restore to default WebStorm IDE settings
Now I'm lost on what to do next to solve this issue.
Some info:
WebStorm 2020.1.1
Build #WS-201.7223.93, built on April 30, 2020
Runtime version: 11.0.6+8-b765.40 x86_64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.15.4
GC: ParNew, ConcurrentMarkSweep
Memory: 1981M
Cores: 8
Registry: ide.intellij.laf.enable.animation=true, ide.balloon.shadow.size=0
Non-Bundled Plugins: com.mallowigi.idea
Does it happen with all Angular components, or some specific once only? Can you reproduce the issue in a new angular project?
If yes, check if Angular support is enabled for your templates: select your Angular
.html
file in Project tool window and hitF1
(View | Quick documentation) - what docs are shown? Please provide a screenshot of this popup and your idea.log (Help | Show log in Finder)Hmm. It seems to work fine if I create a new Angular project.
The project that has the issue is a big custom enterprise application of a few years old. We work on it with dozens of developers. I'm not the one messing with angular.json or whatever other settings.
And none of my coworkers working with WebStorm have the issue. Although they are working either on a 2019 version or 2020.1 and not 2020.1.1 like me.
The documentation shows "No documentation" so I guess no need to add a screenshot of that.
And I wouldn't know how to send you a screenshot of the idea.log file because that things is miles long, or any other way of sending you the idea.log through this channel.
Edit: I reread your comment and I think I did the documentation thing wrong. I now clicked on a template file in the Projects window and hit F1. This pops up:
Thanks:) the screenshot shows that your .html is treated as a plain HTML file and not as angular template, so Angular support is not enabled for your project for some reason... and the issue is specific to your project setup (because it works in new app)
What does your app look like? Is it a single app with package.json and angular.json in the root, or a collection of different apps/monorepo/Angular workspace?
Hi Elena,
I don't think I know the technical term for it, but it's a collection of different repo's.
You can see them as different apps that play are dependent on two shared repositories. A foundational one with a bunch of build logic and one with shared components used in all apps.
They all have their own package.json and angular.json.
There needs to be an active symlink with the shared components repo, but there isn't one with the build logic one (in case this is important info to know).
This is the same setup however 3 other colleagues have that also use WebStorm. The only difference as far as I can see is that they're not on the latest build. But hopefully you know more.
I'm not aware of any regressions in 2020.1.1 that can affect this, it must be your project setup... Does the issue occur with all apps in the project, or some specific ones only? Could you try composing a sample project the issue can be reproduced with?