Analog Language Tools and VS Code plugin

[Jordan-Hall]

Which scope/s are relevant/related to the feature request?

Analog

Information

The Angular Language Service currently does not natively support .ng format files. As developers working with Angular, the ability to work seamlessly with .ng files within the Angular Language Service would significantly enhance the development experience, improving productivity, and ensuring better integration and support for Angular projects.

In addition to addressing the core functionality of supporting .ng format, it would be beneficial for the Angular Language Service to integrate a dedicated plugin for Visual Studio Code. This integration would provide a more cohesive and streamlined development environment, leveraging the extensive features and user base of VS Code. The proposed solution should ideally draw inspiration from the architecture of valor.js, adapting its experimental language service to fully support Angular-specific functionalities and file formats. The goal is to bridge the gap in functionality and provide a robust, Angular-centric development experience within the Angular Language Service, particularly when working with .ng files.

Describe any alternatives/workarounds you're currently using

Currently, we are utilizing the Volar language service, primarily designed for Vue, as a workaround for this limitation. Volar's experimental language service provides a level of support that can be partially adapted for Angular projects. However, this is not an ideal solution due to the inherent design of Volar, which is specifically tailored for Vue. The major drawback is the limited capability of the service in recognizing and properly handling functions and features unique to Angular, resulting in a less than optimal development environment.

Additional helper

Volar already started a angular language service for standard angular but not analog. We can base it off this work.
https://github.com/volarjs/angular-language-tools/

I would be willing to submit a PR to fix this issue

• Yes
• No

I'm currently giving it a go but never done anything like it before

[Jordan-Hall]

@brandonroberts @nartc is this something your interested in and would you want it in this repo?

[nartc]

Absolutely yes!

[Jordan-Hall]

Absolutely yes!

Happy in this repo? Others have a separate, but I think here would work fine :)

[brandonroberts]

This is definitely a goal. We're also still in the experimental phase so I think any significant effort should be prefaced with that. Also to avoid confusion that .ng files are a part of Analog and not Angular itself, so references should point in that direction for now.

[nartc]

@Jordan-Hall I'd rather do separate but if you have no problem with a build process of an extension for this type of thing then I'm fine either way

[brandonroberts]

Renamed the title here for the direction moving forward

[crutchcorn]

Has there been progress in this area? I'd love to help if at all possible

[Jordan-Hall]

I messaged @brandonroberts on twitter. I've made some progress I can share/Split.

Here the message:
I noticed a VS Code plugin for Treaty, and it seems there might be some overlap with Analog for authoring. The best approach seems to involve converting Angular HTML to JSX and then integrating functions into the JSX methodology. This strategy appears optimal for Analog, similar to Svelte's approach. Perhaps it would be beneficial to have a standalone Angular2JSX tool, allowing both to interface with it directly. Unless you taking a different approach for analog

I think having shared effort here be beneficial and going angular 2 TSX just for ide is a good idea. I think a srand alone repo and and joint effort be useful. I can also parse already (that work done)

[SarcevicAntonio]

I wonder how volarjs could be helpful helpful here? https://github.com/volarjs/volar.js
https://volarjs.dev/core-concepts/why-volar/

Edit: I'm sorry, I didn't read the original post fully

[Jordan-Hall]

I wonder how volarjs could be helpful helpful here? https://github.com/volarjs/volar.js https://volarjs.dev/core-concepts/why-volar/

It's what I'm using. I think it's possible now with tsx. But it needs to fully understand angular first :(

[brandonroberts]

Yea, the plan is to use Volar for this also. I don't think doing Angular to tsx is a good idea though

[Jordan-Hall]

Yea, the plan is to use Volar for this also. I don't think doing Angular to tsx is a good idea though

TSX is what most of the others using volar does. But I have it reading correctly the angular. Just got the auto complete now to add for the HTML!

This enables then to be hooked into more for meta frameworks