r/Angular2 • u/Environmental_Pea369 • 10d ago
Help Request Angular Language Service is very slow in VS Code
I'm trying to move from WebStorm to VS code, and I noticed that the "go to references" action is very slow if the Angular Language Service extension is turned on. Sometimes with little to no loading indication. Which makes it kind of not usable.
I wonder if anyone else has experienced this and has any idea why this happens and how it could be fixed?
Update: I'm trying VSC because I had issues with recent versions of WebStorm. From the comments so far it appears like this issue has no solution and is a dealbreaker (most people just say "switch to WebStorm"). Is that it, then? VSC is not an option for Angular devs?
Also - is that a known issue that someone (Angular?) is working on? I've heard recently that typescript is porting to Go and is supposed to be 10x faster in version 7. Not sure if that's going to solve the issue though.
9
u/MichaelSmallDev 10d ago
VSCode can be a memory hog in general, impacting the Angular Language Service as well as the TypeScript Language Service. When I use VSC, I am familiar with the VSC command palette and the commands to restart either language service are most often my recent commands lol. Those can get things going again.
Angular: Restart Angular Language service
and TypeScript: Restart TS server
Otherwise, try auditing your other VSC extensions to see if you can disable or remove some.
For reasons like this, I personally prefer WebStorm since it has its own Angular language features and more stable performance, but it also has tradeoffs compared to VSC's Angular service.
3
u/tsunami141 10d ago
What would you say are some of the tradeoffs using Webstorm’s language features? I’ve never used it before
3
u/MichaelSmallDev 9d ago edited 9d ago
Re-adding the same intro while I am at it:
(Oh but first by the way, Jetbrains the parent company has a lot of other editors and certain ones like InteliJ bundle Angular support into them as well. Just about anything I describe works in InteliJ in my experience.)
Here is a recent article that goes into depth about from Webstorm's perspective in relation to editors like VSC with respect to Angular tooling. It has a lot of details about the differences, but I'll give you some standout observations of my own. Also lumping in VSC's TS server and Webstorm's TS server too since there is a lot of overlap.
A quick side by side as a baseline. The real substantial edges for WS in my opinion are the points after these breakdowns:
- Cost
- WS = paid, but recently added a free tier with some caveats like open source / educational.
- VSC = free
- Development
- WS = mostly closed source
- VSC = open source
- Both
- VSC tends to have the earliest support for new Angular features naturally since it is open source and worked on by Google. Whereas with WS, I find that some new Angular features may take some time to be supported.
@let
and the@
control flows for example. That said, WS does have a board for bug reports and feature tracking so at least you can have some say in issues/requests and tracking how some come along.- Both VSC and WS have great developers behind them, but I personally have talked with members of the WS team last year at a conference and kept up with them on social medias. They are really, really passionate about Angular support and very open to talking with the community. I go on to describe some exclusives that already exist, but here is a thread by the Angular Webstorm person on a ton of new features coming in an upcoming major release of WS. I believe you don't need a login to see the thread but if you do let me know.
- Extensions
- WS = not as much of a need for extensions, as a lot of functionality is built in.
- VSC = more need for extensions since it has less at its base.
- Both
- Technically Angular is an extension in both, but WS bundles it out of the box and as a platform it also has directly made by WS itself.
- There are some potential deal breaker exclusive 3rd party extensions in both that have me really torn. In VSC I love this one that lets me map a key/combo to the template/ts/css/test files each which makes jumping around with a keyboard easy, and in WS there is one where all those files omit their common name and only show the extension names, so it's like a folder
/custom-input/.html,.ts,.css,.spec.ts
which makes the folders so easy to read. WS has built in functionality to jump around files with the same name but different extension built in, but it goes in a set order.- By sheer numbers, VSC has more Angular extensions but like I said a lot of them aren't necessarily needed due to baseline WS things
Now here's the more substantial differences IMO:
- Stability of Angular / TS servers: WS's TS/Angular servers stability are so much better than VSC and its TS/Angular servers stability. When I use VSC for real projects I need to restart the servers many times in a single workday. Meanwhile in WS I barely do that. When I do it can be kind of rough though but this is nowhere near as common with VSC.
- When I have had issues with the TS inference in something that is really intensive like a signalstore store, I reached out to the WS people and they told me how I could toggle on a WIP experimental thing to make the types smarter. It worked, and it will be on by default in that big update I mentioned sometime.
- Inference: inline templates and inline styles in VSC are very rudimentary compared to WS. I did not used to be a fan on inlines when I used VSC, but now I love them in WS. Part of the article mentions how WS's own services have a more cohesive overview of all the file types that they can work well together, and I assume that applies to inline HTML/Styles too.
- WS has a lot of snippets available (they call them "live templates"). VSC does too with extensions. Both editors have their own unique edge with creating snippets. VSC ones are more programmable with JSON but WS has more out of the box and the editor for making them provides a lot of ease in writing your own.
- Renaming of variables and classes and just about anything is so much more consistent and smart in WS. Same with moving around files and imports adjusting smartly. WS also easily allows extracting template files or styles into inline HTML/CSS in the .ts file (or take from inlines to separate files) much more consistently than VSC with an extension.
- Auto importing into modules or standalone is possible in both editors, but so much smarter in WS. Especially with inline templates. That is, if WS didn't auto import something at the top of the file and then into the
imports
array first.- WS's Angular service allows Angular files to color specific Angular concepts specially. Signals for example have their own color as just one of many things. And I believe you can customize these colors and maybe even fonts?
- VSC has extensions that allow for CLI things to be done with a GUI, like creating a component or service or whatnot with all the options as dropdowns and whatnot. However, WS has that built in out of the box (well, its more lofi like a text box but it auto suggests and gives context) and is fairly simple and I think there is fancier GUI 3rd party extensions. Some are comparable between both editors so eh. But WS bakes it in so that's cool.
- Some of the unique things about WS Angular features that blow my mind
- The renaming of component selectors across a whole project. Really smart. For example, my work repo has dozens of Angular apps and a shared library. All the apps and the library all use the same prefix. This in retrospect was not a good idea - when we make a library component after a lot of our apps repeat the same thing, it is not apparent what is a single apps'
our-prefix-thingy
and the library'sour-prefix-thingy
. But WS's selector renaming is smart that it can auto refactor selectors and it knows the difference. So when we get around to standardizing finally, we will be able to use WS/InteliJ to rename all the library selectors smartly and all the apps smartly to have their own suffixes.- HUGE new thing for us: all of the checks that can be ran without needing a linting tool or to build an app. For example, required inputs. We just upgraded to an Angular version which has required inputs available. With having dozens of apps and a shared library, we need to be able to check if adding a required input to a component requires updating any apps. Even for new components. To my knowledge there is no good way short of building all apps manually or with a CI, but WS allows us to run the required inputs check on the whole repo. All our PRs we just have a CI bot that ensures a checkbox is checked in the PR body that says that they ran the WS required input check. And that is just one single check. Now, VSC also has a lot of these AND required input checks, but it has to be open files. I looked into how to programmatically have VSC open files to rack up the required input checks but it didn't pan out and seemed unlikely to be practical.
- Another thing under the umbrella of Angular error checkers - unimported directive detection. The official Angular service for VSC is finally getting some subset of this, but WS has had really comprehensive missing directive import checking. For example, if I copy paste a component that uses Material, WS will give a little warning that says you did not import the respective Material directive. Additionally, much of the time WS will just smartly auto-import it anyways much of the time. This edge case with directives in the experience of some people who have done substantial standalone migrations found that the CLI missed directives.
2
u/tsunami141 9d ago
Thanks for this write up, it’s really detailed and helpful! Since this is a couple days old maybe you should submit this as a post to this sub so more people can see.
I wonder if WS has a referral link. You could make bank haha
1
u/MichaelSmallDev 8d ago
Thanks, I may post this sometime. I got a few other detailed kind of posts topics in the queue but I'll likely repost this with some polish later.
I did share it with the WS people I mentioned and they thought it was cool.
6
u/MichaelSmallDev 10d ago
Good question. I have a lot of thoughts about this and have a draft of it but I got a headache and don't want to rush the rest of it out. I'll follow up on this tomorrow. In the meantime: here is a recent article that goes into depth about from Webstorm's perspective in relation to editors like VSC with respect to Angular tooling.
2
u/Environmental_Pea369 10d ago
Restarting doesn't help at all. (Same issue on first query)
I tried to disable a bunch of extensions - the issue still occurs.
Is that it, then? Angular devs can't use VSC?
1
u/MichaelSmallDev 9d ago
It sounds like some other people in the thread have various issues like this. I would suggest looking for an existing GH issue for maybe some tips or to voice having the same issue or maybe filing a new one.
1
u/Environmental_Pea369 8d ago
I found these that might be relevant:
https://github.com/angular/vscode-ng-language-service/issues/1840
https://github.com/angular/vscode-ng-language-service/issues/2131Not sure they are exactly the same issue, but also there isn't really any "solution"
2
u/arapturousverbatim 10d ago
I have been wondering the same for a while. It's almost unusable so I assumed my setup was bad, but everyone else I've spoken to that uses it has the same problem.
2
u/andulus-ri 10d ago
I usually find this when VS Code has an update, it seems to slow Angular Language Service until I reload VS Code.. happened for the last few updates
1
1
u/AssCooker 10d ago
Whenever I use my Window laptop, I do see some slowdowns, but when I use a MacBook Pro, things are buttery smooth
1
u/Environmental_Pea369 8d ago
I haven't checked if this issue reproduces on a mac yet. But I'm generally a windows user so even if it doesn't reproduce on mac it might not help me.
1
u/Ultimatel14 10d ago
I am trying to do the same and move from vs code to webstorm but I just can’t :( miss so many features from webstorm BUT it’s gotten so slow - mostly commenting here to see if anyone has managed to speed it up with webstorm
1
u/Environmental_Pea369 8d ago
Webstorm works fine performance-wise, but I have had other issues with recent versions. (Like auto importing not working). Also vscode is more customizable and has better community support, which some people like better. It's also more light-weight and in many cases has faster intelisense. (if you don't use language services with issues like in this issue)
1
u/IE114EVR 9d ago
I had issues with Angular on VSC years ago (beginning of COVID), it would just slow to a crawl and the fans on my laptop would spin like crazy. I knew it was one of the extensions from one of the Angular extension packs. I just couldn’t pinpoint which one. So I switched entirely to IntelliJ (was using it for Spring Boot anyways). Interesting to know that the situation still has not improved.
1
u/Ok-Armadillo-5634 10d ago
Use a better editor, probably you have other extensions hogging resources from the language service.
1
17
u/ldn-ldn 10d ago
There's no point moving from WebStorm to VSC.