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

[lizclipse]

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.

[draylegend]

@lizclipse I tried your config but getting the error after using gD

Do you use gotos?

[lizclipse]

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

[osenvosem]

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.

[pebrianz]

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 @angular/language-server and typescript globally

npm i -g @angular/language-server typescript

Install @angular/language-service 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

[pebrianz]

"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

[SofusA]

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?

[draylegend]

@SofusA is it compatible with @nrwl/nx?

[SofusA]

@SofusA is it compatible with @nrwl/nx?

Yes it does. You should probably replace angular.json with nx.json