Add Angular support in editor (done in TypeScript files, TODO in HTML files)

[mickaelistria]

Angular provides a language server ( https://github.com/angular/vscode-ng-language-service/tree/master/server ) which is already used by VSCode. We should try to add this into Wild Web Developer.

[mickaelistria]

We may try to extract the LS from VSCode like we do for some LS already, but things would be much simple if we manage to get https://github.com/angular/vscode-ng-language-service/issues/317 resolved first.

[emvidi]

wow, I was just going to open an issue exactly for this :)

[angelozerr]

@mickaelistria I had managed angular support inside Eclipse with https://github.com/angelozerr/angular-eclipse

It uses tsserver instead of using LSP, but now you have integrated https://github.com/theia-ide/typescript-language-server you should be able to use typescript plugin . The angular project provides a tsserver plugin for angular. To enable it, you must declare it in your tsconfig.json:

{
  "compilerOptions": {
    ...
    "plugins": [
      { "name": "@angular/language-service"}
    ]
  }
}

and install angular/language-service before.

See my explanation at https://github.com/angelozerr/angular-eclipse/wiki/New-and-Noteworthy-1.3.0#angular-language-service

The TS language server must be executed too for HTML content type too. Never tried, but I think it's the right direction. The VS code ng language service uses the angular language service if I remember.

[angelozerr]

@mickaelistria instead of managing plugin inside tsconfig.json, we could do that like you suggest with tslint https://github.com/eclipse/wildwebdeveloper/issues/110#issuecomment-468644535

[yanxi0830]

According to angular/vscode-ng-language-service, they are running a duplicate version of typescript service along with @angular/language-service. So I think the result of using a separate angular language server would be equivalent to adding angular/language-service plugin for tsserver as @angelozerr have suggested. I think it would be easiest to take the plugins approach as a similar thing is involved with tslint.

[mickaelistria]

Ok. But how is the typescript-language-server going to work with HTML documents?

[angelozerr]

According to angular/vscode-ng-language-service, they are running a duplicate version of typescript service along with @angular/language-service.

Indeed it was the same problem with old vscode-tslint, that's why I had created https://github.com/angelozerr/tslint-language-service which is a typescript plugin and https://www.npmjs.com/package/typescript-tslint-plugin replaces now my project.

In other words using @angular/language-service as typescript plugin is the well mean.

Ok. But how is the typescript-language-server going to work with HTML documents?

It's a very good question and it's one reason why vscode doesn't use directly the angular language service. See https://github.com/angular/vscode-ng-language-service/issues/43#issuecomment-314146422

In my Angular Eclipse project which uses tsserver and angular language service, I call tsserver for js, ts and html files. But it cause troubles if you don't use angular ls. See https://github.com/angelozerr/angular-eclipse/issues/97

To fix this bug, tsserver must fix https://github.com/Microsoft/TypeScript/issues/17151 but I'm afraid it's not in the priority of typescript team.

[mickaelistria]

It's a very good question and it's one reason why vscode doesn't use directly the angular language service.

So how does VSCode provide Angular completion in HTML documents then? Our last experiments show the exact same issue as https://github.com/angelozerr/angular-eclipse/issues/97 . Do you know how to work around it?

[angelozerr]

So how does VSCode provide Angular completion in HTML documents then?

It doesn't use angular ls directly and use extra code which consumes angular ls. In other words, it doesn't use LSP.

Do you know how to work around it?

The only ugly mean that I found is to modify the tsserver.js https://github.com/angelozerr/angular-eclipse/issues/97#issuecomment-314683721

In other words we must wait for Microsoft/TypeScript#17151

[mickaelistria]

Can't we already include support for Angular in the TS files? The typescript-language-server is currently only associated with .js/.ts file so it shouldn't pollute the HTML ones and we may already get some value from Angular support without much trouble.

[angelozerr]

Can't we already include support for Angular in the TS files?

Yes like I have done with Angular Eclipse. It should be sam ething than #110 (comment)

[yanxi0830]

Currently using the @angular/language-service with typescript-language-server only works with typescript files, and executing the language server with html templates reports ts errors. I've opened https://github.com/theia-ide/typescript-language-server/issues/104

[mickaelistria]

Thanks @yanxi0830 , do you already have the @angular/language-server working in Wild Web Developer? If yes, does it bring enough value in your opinion? If yes, then feel free to submit a PR for that part and we'll take care of the HTML part when upstream issues has a solution or a good workaround.

[yanxi0830]

@mickaelistria yes, currently it is working with TS files. I'll make a PR soon, although I think this only brings a little value since users can add the @angular/language-server to tsconfig.json in their Angular project if they want to accomplish the same thing.

[mickaelistria]

I think support out of the box is much nicer than having to tweak some config files. The way tsconfig.json works (user having to care about the tool) is arguable, so if we can be a bit better, that's nice. Moreover, it allows us to start checking the buzzword bingo line "Angular support out-of-the-box" and try to fish some new users with it ;)

[jabby]

I'm ok with the proposal. It's better to have the latest angular-service than nothing. If someone need a specific angular-service for a project, we can open a new issue and work on specific integration.

[mickaelistria]

Angular works in TypeScript files, this bug can still be used to track support for ng attributes in HTML files.

[kyliau]

Hello all! Kinda late to the party here, but I've started working on the Angular LS, and I wonder if there's anything I can help. @yanxi0830, could you please share your setup? How do you load @angular/language-service? Based on what I've read about tsserver plugin so far, I wrote a summary here. Would very much welcome additional inputs/suggestions. Thank you!

[yanxi0830]

@kyliau Hello there! If I remember correctly, I integrated through setting via the global plugins initializationOptions here https://github.com/eclipse/wildwebdeveloper/blob/master/org.eclipse.wildwebdeveloper/src/org/eclipse/wildwebdeveloper/jsts/JSTSLanguageServer.java#L48

which does something like adding --pluginProbeLocations argument while initializing the server.

[mickaelistria]

@kyliau Hi, thanks for coming here. FYI, @yanxi0830 is not working on Wild Web Developer any more, but the project still have high interest in improving Angular support.

Wild Web Developer includes @angular/language-service 7.2.9 (and I also tried with 8.0.0) as you can see in https://github.com/eclipse/wildwebdeveloper/blob/master/org.eclipse.wildwebdeveloper/language-servers/package-lock.json#L8 ; this plugin is passed as an initializationOption to https://github.com/theia-ide/typescript-language-server which then passes it to tsserver both as a --globalPlugins and --pluginProbeLocations (see https://github.com/theia-ide/typescript-language-server/blob/6faea64ba5b0c748601197fa4db309e83b838fb0/server/src/lsp-server.ts#L108 and then https://github.com/theia-ide/typescript-language-server/blob/9addd3b5c97f553503b4ae1338c51ef2f7a84883/server/src/tsp-client.ts#L96 ).

With both @angular/language-service 7.2.9 and 8.0.0, I get good assistance for Angular components in .ts files, but I see HTML files getting filled with parsing errors, as if they were parsed as TypeScript files, when I let the Language-server/tsserver take care of them. Is there a dedicated ticket to track this issue in @angular/language-service?

[kyliau]

I've seen the exact issue (HTML gets parsed as TS) before, but I could no longer reproduce the behavior using TS 3.4.5. What's the TS version that you tested with?

Somehow the plugin must tell tsserver to "pass me HTML files in addition to TS". From the setup you mentioned, I couldn't think of any places this is done other than the getExternalFiles() call to the @angular/language-service.

In my setup, I tested with the workspace version of typescript instead of vscode's version.

This is the exact tsserver spawn command from the logs:

/usr/share/code/code \
  /project/path/node_modules/typescript/lib/tsserver.js \
  --useInferredProjectPerProjectRoot \
  --enableTelemetry \
  --cancellationPipeName /tmp/vscode-typescript/tscancellation-40758cdbdce3a51de5ae.tmp* \
  --logVerbosity verbose \
  --logFile /home/.config/Code/logs/20190604T161725/exthost1/vscode.typescript-language-features/tsserver-log-beo6Mt/tsserver.log \
  --globalPlugins @angular/language-service \
  --pluginProbeLocations /home/.vscode/extensions/angular.angular-language-service-0.0.1 \
  --locale en \
  --noGetErrOnBackgroundUpdate \
  --validateDefaultNpmLocation

tldr; I'd first need to reproduce the error before I could fix it ..

[mickaelistria]

I've locally upgraded to TypeScript 3.5.8, typescript-language-server 0.3.8 and @angular/language-service 8.0.0 and still see the error parsing HTML.

The tsserver command is /usr/bin/node /home/mistria/git/wildwebdeveloper/org.eclipse.wildwebdeveloper/language-servers/node_modules/typescript/lib/tsserver.js --globalPlugins @angular/language-service,typescript-plugin-css-modules,typescript-lit-html-plugin --pluginProbeLocations file:/home/mistria/eclipse-SDK/../git/wildwebdeveloper/org.eclipse.wildwebdeveloper/language-servers/node_modules/@angular/language-service/,file:/home/mistria/eclipse-SDK/../git/wildwebdeveloper/org.eclipse.wildwebdeveloper/language-servers/node_modules/typescript-plugin-css-modules/,file:/home/mistria/eclipse-SDK/../git/wildwebdeveloper/org.eclipse.wildwebdeveloper/language-servers/node_modules/typescript-lit-html-plugin/ --cancellationPipeName /tmp/a87f2fc895baf8159915072680a39ce3/tscancellation*

[jabby]

@mickaelistria are you sure the node_modules folder was updated with the version you want? See https://github.com/eclipse/wildwebdeveloper/pull/170#issuecomment-499226472 for some explanations about update to new version of dependencies through npm.

[mickaelistria]

WIP at https://github.com/mickaelistria/wildwebdeveloper/pull/new/angular , based on new information available at https://github.com/angular/vscode-ng-language-service/issues/375#issuecomment-526385269

[mickaelistria]

This was fixed last month.