Open goulaheau opened 1 year ago
[[language]]
name = "angular"
scope = "source.angular"
roots = ["angular.json"]
language-server = { command = "ngserver", args = ["--stdio", "--tsProbeLocations", "$(npm -g root)", "--ngProbeLocations", "$(npm -g root)"] }
file-types = ["ts", "html"]
npm install -g @angular/cli @angular/language-service typescript @angular/language-server
@hunterliao29 Hi, thank you for your config example. I've tried to replicate it but there is no syntax coloration.
I'm sure that my [[language]] is well configured, I had some problems because on Windows $(npm -g root)
was not working, I had to put the full location.
I have 2 hints for the cause :
runtime/queries/angular
, I have tried to add them to my local folder of Helix, but I'm not sure if that's doing anything.Do you know why I have this issue by any chance please ? Thanks in advance.
If someone uses nx-based projects, you can add "nx.json"
to roots
and get syntax highlighting.
@hunterliao29 do Gotos
work in your editor, e.g.: definition
, declaration
or implementation
in angular components/services?
If someone solved it, please help me to understand, how can I configure my editor in order to get angular working.
BTW. This is really an awesome and fast editor with a lot of features pre-installed, unlike the neovim.
@draylegend @hunterliao29 Any idea how to get syntax highlighting for non mx-based projects? The LSP functionality works great but lack of syntax highlighting makes it unusable
@Sackbuoy didn't try it. Switched to another IDE
Has there been any progress on this? I'm struggling to get the Angular LSP working, although I thought I did get it working fine at one point and then lost the config for it. This is what I've got at the moment, but I'm not sure if I'm missing something
[language-server.angular]
# command = "sh"
# args = ["-c", "ngserver --stdio --tsProbeLocations \"$(yarn global dir)/node_modules\" --ngProbeLocations \"$(yarn global dir)/node_modules\""]
command = "ngserver"
# args = ["--stdio", "--tsProbeLocations", "/home/vscode/.config/yarn/global/node_modules", "--ngProbeLocations", "/home/vscode/.config/yarn/global/node_modules"]
args = ["--stdio", "--tsProbeLocations", ".", "--ngProbeLocations", "."]
[[language]]
name = "angular"
scope = "source.angular"
roots = ["angular.json"]
file-types = []
language-servers = [ "angular" ]
I've tried various different setups, and none seem to work super well. The main issue with the config as-is seems to be that there's no way to find the yarn dir dynamically (I'm personally using yarn instead of npm, but this brings up an issue with limiting this LSP to a specific package manager) without calling into sh
first, but doing that or providing the paths directly doesn't seem to work properly anyway. Because there seems to be issues with languages overloading file-types, I've just been calling :lang angular
manually when opening source-code, which seems to start the LSP, but I can't get anything out of it. The hover (<space>k
) just doesn't do anything, and non of the gotos work either.
Does anyone have an idea on what I'm missing? Or, is something missing from Helix to make this work as expected?
[language-server.angular]
command = "ngserver"
args = [
"--stdio",
"--tsProbeLocations",
"$(npm -g root)",
"--ngProbeLocations",
"$(npm -g root)",
]
[language-server.eslint]
command = "vscode-eslint-language-server"
args = ["--stdio"]
[[language]]
name = "typescript"
formatter = { command = 'prettier', args = [
"--write",
"--parser",
"typescript",
] }
auto-format = true
language-servers = ["typescript-language-server", "angular", "eslint"]
[[language]]
name = "html"
formatter = { command = 'prettier', args = ["--write", "--parser", "html"] }
auto-format = true
language-servers = ["vscode-html-language-server", "angular"]
@lizclipse This is my typescript and angular language configuration. Works at expected :slightly_smiling_face:
Installed with npm:
npm install -g @angular/cli @angular/language-service typescript @angular/language-server
Just tried it out and the config from @SofusA worked like a charm 💯 Thank you!
How to use helix with wsl?
I've installed helix on windows and wanna use it by opening folders on wsl like \\wsl.localhost\web\home\dl\nx-uno
.
I've created ~/nx-uno/.helix/languages.toml
, used @SofusA's config and npm install -g @angular/cli @angular/language-service typescript @angular/language-server
.
gd
or gD
don't work; the error no configured language server supports goto-definition
.
I've many distros installed on wsl, so it makes sence to me to use helix on windows and not on each debian distro.
@SofusA I've tried your exact config and I keep on getting this error:
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- "/usr/local/lib/node_modules/@angular/language-server/index.js:193085\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- " throw new Error(`Failed to resolve '${packageName}' with minimum version '${minVersion}' from ` + JSON.stringify(probeLocations, null, 2));\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- " ^\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- "\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- "Error: Failed to resolve '@angular/language-service' with minimum version '15.0' from [\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- " \"$(npm -g root)\"\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- "]\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- " at resolveWithMinVersion (/usr/local/lib/node_modules/@angular/language-server/index.js:193085:13)\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- " at resolveNgLangSvc (/usr/local/lib/node_modules/@angular/language-server/index.js:193136:14)\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- " at main (/usr/local/lib/node_modules/@angular/language-server/index.js:193161:54)\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- " at Object.<anonymous> (/usr/local/lib/node_modules/@angular/language-server/index.js:193189:1)\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- " at Module._compile (node:internal/modules/cjs/loader:1376:14)\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- " at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- " at Module.load (node:internal/modules/cjs/loader:1207:32)\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- " at Module._load (node:internal/modules/cjs/loader:1023:12)\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- " at Module.require (node:internal/modules/cjs/loader:1235:19)\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- " at require (node:internal/modules/helpers:176:18)\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- "\n"
2024-01-08T23:45:49.446 helix_lsp::transport [ERROR] angular err <- "Node.js v20.10.0\n"
2024-01-08T23:45:49.455 helix_lsp::transport [ERROR] angular err: <- StreamClosed
2024-01-08T23:45:49.455 helix_lsp [ERROR] failed to initialize language server: server closed the stream
Have you seen this one before? To me it looks like Helix is passing the $(npm -g root)
directly without expansion, which confuses me to no end. Still, replacing that with the absolute full path doesn't change anything, since the LSP just seems to run and not do anything at all, meaning that hover does nothing.
@lizclipse I got a similar problem. Eventually I solved it by replacing the value for --ngProbeLocations
with a hard-coded value. Spaces in the filename don't seem to cause a problem. So my config for the Angular Language Server now looks like this:
[language-server.angular]
command = "ngserver"
args = [
"--tsProbeLocations",
"$(node -g root)",
"--ngProbeLocations",
"C:/Program Files/nodejs/node_modules",
"--stdio",
]
It's a bit weird that only --ngProbeLocations
behaves like this, though. --tsProbeLocations
is totally fine with $(npm -g root)
for me. Still, it works!
It works! syntax highlighting, autocompletion, error checking and goto navigation.
[language-server.angular]
command = "ngserver"
args = [
"--stdio",
"--tsProbeLocations",
"$(npm -g root)/typescript/lib",
"--ngProbeLocations",
"$(npm -g root)/@angular/language-server/bin",
]
[[language]]
name ="html"
roots = ["angular.json"]
language-servers = ["angular","vscode-html-language-server"]
[[language]]
name = "typescript"
roots = ["tsconfig.json"]
language-servers = ["angular","typescript-language-server"]
Install @angular/language-server
npm i -g @angular/language-server
I'm back to writing Angular again, so I've had to look at the issues I'm having properly. I don't think it's been mentioned here, but I've only got it working when specifying the Angular LSP first, having it second results in the wrong hover and some weird expansion issues. I'm using Yarn for things, so, just as a curiosity, here's the yarn version of the config that I'm using:
[language-server.angular]
command = "ngserver"
args = [
"--stdio",
"--tsProbeLocations",
"$(yarn global dir)/node_modules",
"--ngProbeLocations",
"$(yarn global dir)/node_modules",
"--forceStrictTemplates",
]
[[language]]
name = "html"
language-servers = ["angular", "vscode-html-language-server"]
I think the ability to automatically disable lang-servers unless operating in the right env (eg only run the Angular LS iff angular.json
exists) would be very handy, as it would allow configuring this and then not having to ever touch it when jumping between Angular and non-Angular projects.
@lizclipse I tried your config but getting the error after using gD
Do you use goto
s?
@draylegend I had a quick look, and I get the same thing even when I don't set the Angular LSP as configured for TypeScript. From the looks of it, maybe the TS LSP doesn't support that specific goto? I do use gotos regularly, but I've not encountered an LSP that implements all of them yet.
All of this said, I think goto-declaration
would be a more C/C++ thing, as they have the declaration/implementation files, whereas TypeScript has definitions and types, both of which are different gotos and work fine for me. I have just realised that I didn't include the TypeScript language config, but I don't have access to it right now and the only thing to change for it is to add the angular
LSP to the end (making use the TS one is first).
Tried a few configurations posted here, always getting "Language server exited" error in helix when I open html or ts file. Also no highlighting for ts. @angular/language-server
and @angular/language-service
are installed.
Here my config, i try on angular 17 it's working fine like error checking
, auto completion
and goto navigation
like goto definition and goto reference
[language-server.angular]
command = "ngserver"
args = [
"--stdio",
"--tsProbeLocations",
"$(npm root -g)/typescript/lib",
"--ngProbeLocations",
"$(npm root -g)/@angular/language-server/bin",
]
[[language]]
name ="html"
roots = ["angular.json"]
language-servers = ["angular","vscode-html-language-server"]
[[language]]
name = "typescript"
roots = ["tsconfig.json"]
auto-format = true
formatter = { command = "biome", args = ["format", "--stdin-file-path","*.ts"]}
language-servers = ["angular","typescript-language-server"]
Install code>@angular/language-server</code and typescript
globally
npm i -g @angular/language-server typescript
Install code>@angular/language-service</code locally on project
npm i -D @angular/language-service
You can try open component ts or html file in angular project, if helix editor not showing language server exited, it's work, you can wait a moment while language server gets functional
"It seems 'npm root -g' doesn't retrieve the global path, '@angular/language-server' will use 'typescript' and '@angular/language-service' within the project, not globally. That's why you have to install '@angular/language-service' as dev dependencies in the project.
Same if you set ngProbe path to ".", "a" or "abc", it will use '@angular/language-service' within the project
[language-server]
angular-ls = {command = "ngserver", args = ["--stdio", "--tsProbeLocations", ".", "--ngProbeLocations", ".",]}
If you prefer not to install '@angular/language-service' in every project, just use global '@angular/language-server', you can set the path to your global path as shown below:
[language-server.angular-ls]
command = "ngserver"
args = [
"--stdio",
"--tsProbeLocations",
"/usr/lib/node_modules/typescript/lib",
"--ngProbeLocations",
"/usr/lib/node_modules/@angular/language-server/bin",
]
So, you don't need install '@angular/language-service' in project or global, just install '@angular/language-server'
And then you can add angular-ls to html and typescript languge,
[[language]]
name ="html"
language-servers = ["angular-ls","vscode-html-language-server"]
[[language]]
name = "typescript"
language-servers = ["angular-ls","typescript-language-server"]
put angular first, idk why if i put it second, angular-ls won't work
I have created a self contained nix flake which simplifies setup: sofusa/angular-language-server
This allows a language config like this:
[language-server.angular]
command = "angular-language-server"
roots = ["angular.json"]
[[language]]
name = "html"
language-servers = ["vscode-html-language-server", "angular"]
Should we add a wiki page for setup angular and other front end language servers?
@SofusA is it compatible with @nrwl/nx?
It would be great to have Angular support natively.
I'm totally new to modal editors in general and I can't find a way to add Angular support.
Thanks