Add Angular support

[goulaheau]

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

[hunterliao29]

[[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

[goulaheau]

@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 :

1. By looking at the logs of Helix, and starting helix with -v parameter, I saw some lines with this message : helix_term::application [ERROR] received malformed notification from Language Server: Unhandled
2. I saw your PR and you have added some files in 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.

[draylegend]

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.

[Sackbuoy]

@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

[draylegend]

@Sackbuoy didn't try it. Switched to another IDE

[lizclipse]

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?

[SofusA]

[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 🙂

Installed with npm:

npm install -g @angular/cli @angular/language-service typescript @angular/language-server

[Sackbuoy]

Just tried it out and the config from @SofusA worked like a charm 💯
Thank you!

[draylegend]

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.

[lizclipse]

@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.

[jcarstairs-scottlogic]

@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!

[pebrianz]

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