Comments (32)
I will be working on this next week. Unfortunately, many of the internal APIs to TypeScript changed significantly with 2.2 so the upgrade is not simple.
from vscode-ng-language-service.
@fxck I am working on it this week. I met with the TypeScript team last week and we came up with a better long-term strategy that is less likely to be broken as the TypeScript team is making changes. I am implementing my part this week.
from vscode-ng-language-service.
@fxck Yes. 2.3 is the release we have been waiting for but it still doesn't have everything we need. I am coordinating with Microsoft, both the TypeScript and VSCode teams, regarding this. The changes necessary should be landing in the next couple of weeks.
My side has been implemented and is in Angular master. I have a PR for the the changes necessary for TypeScript out (tentatively slated for 2.3.2). The VSCode team is working on the changes to the TypeScript plugin that is necessary and most of which are currently in VSCode master. We need a subsequent change to handle external html
files but that should also be landing in the next couple weeks.
Once all of this comes together I will update my plugin to use the new plugin architecture which will resolve most of this issues people have been having with the plugin as well as position the code to allow more features such as renaming references in templates.
from vscode-ng-language-service.
@chuckjaz sorry for the noise, it was my fault, it works great now, here a little demo with @angular/language-service with Eclipse and HTML editor:
It works great! Many thank's for your great work!
from vscode-ng-language-service.
You mean, when an html file is opened, it should consumes tsserver commands like open, change for HTML file like for TypeScript file?
Yes.
Global plugins gives the capability to register a plugin without installing in your project, is that?
Yes. The global plugins are loaded in addition to the ones listed in the config file.
from vscode-ng-language-service.
Hi @chuckjaz Typescript 2.3.3 was released today. Are your PRs present in this version? Will you be able to finish that integration into TsServer?
Thank you for great work :)
from vscode-ng-language-service.
Fixed in 0.1.4
from vscode-ng-language-service.
If you want to get ahead :
npm install typescript@next --save-dev
Then in your tsconfig.json :
{
"compilerOptions": {
"plugins": [{ "name": "@angular/language-service" }]
}
}
Finally choose this last version of TypeScript (2.3) in VS Code (on bottom right), and restart as suggested.
Ta da. No need of the extension, and it will be amazingly faster, as it does not run a duplicate typescript process.
from vscode-ng-language-service.
How can I test?
I should go from html template to my variable definition via F12? this does not work.
from vscode-ng-language-service.
You'll see infos when over your components, autocomplete for properties binding, etc. But I'm working with inline templates, I didn't test with external templates yet.
from vscode-ng-language-service.
yes works with inline templates but not with external templates
from vscode-ng-language-service.
My plan is to use the new plugin architecture in 2.3 by default. This plugin would only then be required to get completions from external template references.
This should coincide around the time of the official 2.3 release.
from vscode-ng-language-service.
The first official release of this plugin (0.1.1) works only with TypeScript 2.1 and not with 2.2.
I think it should now be a bug to fix soon instead of an enhancement because angular/cli installs TS 2.2 by default, so the plugin is not compatible by default for many angular projects.
from vscode-ng-language-service.
@chuckjaz any news on this? thank you
you only realise how big of a deal this plugin is when you can not use it
from vscode-ng-language-service.
@chuckjaz does that mean it will have to wait for a new version of typescript? Major? Minor?
from vscode-ng-language-service.
https://blogs.msdn.microsoft.com/typescript/2017/04/27/announcing-typescript-2-3/ guess this is it
from vscode-ng-language-service.
We need a subsequent change to handle external html
@chuckjaz do you mean that TypeScript team should manage Plugin#getExternalFiles()
https://github.com/Microsoft/TypeScript/blob/2150a7796b0dfe83c5286755410e0fd1646ed86c/src/server/project.ts#L270 It seems that you have implemented it https://github.com/angular/angular/blob/master/packages/language-service/src/ts_plugin.ts#L17 but TypeScript doesn't use it?
I post you this question because I try to integrates @angular/language-service inside Eclipse with TypeScript Plugins. It works great with @Component/template inside a TypeScript file but not when template is declared in html file.
Thanks for your answer.
from vscode-ng-language-service.
@angelozerr Correct.I have a PR pending to TypeScript that enables it and we are working through the details of landing it. Once that is landed the TypeScript service will handle request for external templates.
However, it is an exercise for the integrator how to get the editor to direct in html files requests to TypeScript.
The current plans for VSCode is for TypeScript extensions to be able to add file types which should be handled by the TypeScript service. This plugin then would become a VSCode TypeScript plugin that would add html
files to that list along with registering @angular/language-service
as a TypeScript global extension.
from vscode-ng-language-service.
Thanks so much for your great explanation.
The current plans for VSCode is for TypeScript extensions to be able to add file types which should be handled by the TypeScript service.
You mean, when an html file is opened, it should consumes tsserver commands
like open
, change
for HTML file like for TypeScript file?
with registering @angular/language-service as a TypeScript global extension.
I have seen that now TypeScript provides global
plugin, but I don't understand how it works. For the moment I declare TypeScript plugins like your @angular/language-service and my tslint-language-service in the plugins
section of tsconfig.json
and it requieres having @angular/language-service
in the node_modules
of the project.
Global plugins gives the capability to register a plugin without installing in your project, is that?
from vscode-ng-language-service.
Thanks so much to have taken time to give me answer.
I will track TypeScript work to test that, I'm so very enthousiasm with your work and integrate it inside Eclipse:)
from vscode-ng-language-service.
It is not. There are some issues we found in the design fairly late and they have yet to work through them completely.
from vscode-ng-language-service.
So it was merged just now. Hopefully coming with the nest minor release.
from vscode-ng-language-service.
@chuckjaz I'm trying to consume "definition" tsserver command inside Eclipse from HTML angular template app.component.html
:
<h1>
{{title}}
</h1>
to retrieve definition of title
property declared in a TypeScript file
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
with :
- @angular/[email protected] which implements
getExternalFiles
- [email protected] which defines
getExternalFiles
In my HTML editor I consumes the same commands than tsserver like open, change, etc commands, but it doesn't work. When you will have time please tell me which tsserver commad, an editor must consumes (ex: pass a particulary skriptKing 'html' when an HTML editor is opened?) Thanks!
from vscode-ng-language-service.
I don't know what could be wrong as this is one of the tests I run to validate the language service works.
One thing you could try is opening app.component.ts
first and see if that helps.
What getExternalFiles
does is allow tsserver
to query a plugin to calculate a list of external files to include in a project that is associated with a particular tsconfig.json
file. If the .html
file is not associated with an angular project, the .html file will be treated as a loose .ts file.
from vscode-ng-language-service.
@chuckjaz @angelozerr
Guys does this mean, that with Angular 4.2.0 and Typescript 2.4.0 this extensions for VSCode will be obsolete and it will work in VSCode or any editor that can work with typescript TSServer using just typescript plugin?
from vscode-ng-language-service.
There will still be a Angular plugin for VSCode but it will change considerably. Instead of having its own server it will register with VSCode that @angular/language-service
is a valid TypeScript plugin and provide a default plugin if the project doesn't include one.
The @angular/language-service
plugin will work in any context that TypeScript runs in a node instance (this, at least for now, excludes Visual Studio proper). However, for completions to work in a external .html
file, as demonstrated by @angelozerr above, requires the editor know to direct requests from the .html
file to tsserver
which is going to be different for each editor (and is, why the Angular plugin for VSCode is still necessary).
from vscode-ng-language-service.
Hi @chuckjaz, it looks like that Typescript 2.4 RC is out and Angular 4.2.2 is also out :). Would it be possible to try to update plugin to these latest changes :). Maybe now it will work as it should :).
I just look forward for this awesome plugin :).
Thank you
from vscode-ng-language-service.
Updating past 2.1 is challenging with the existing architecture as there were some internal changes to TypeScript that broke my server. However, the TypeScript plugin architecture makes this moot and I am working to move to that but it is taking longer than I thought.
I will update the language service bundled with the 2.1 based server early next week if I cannot get all the pieces to land together for the new architecture.
from vscode-ng-language-service.
If the .html file is not associated with an angular project, the .html file will be treated as a loose .ts file.
@chuckjaz I have a problem about that I think. Indeed when I open an HTML file which is not linked to an Angular Template, my HTML file is considered as a TypeScript file and semanticDiagnosticsSync
returns TypeScript errors (my HTML have a lot of errors) and don't consume the semanticDiagnosticsSync
of the Angular language service plugin. Is it a problem that you have though? Perhaps my integration is bad?
Thanks for your help!
from vscode-ng-language-service.
This is the reason I haven't converted over to the new plugin architecture yet. The TypeScript team is working with the VS Code team to resolve this.
The safest thing is to ask the Angular language service which files are templates and only request information from tsserver when this is true. There is no existing protocol for this, however, The solution Microsoft is working on is passing the kind of the file along with this request allowing the server to determine if the file should be treated as a TypeScript file.
from vscode-ng-language-service.
As usually, many thanks for your great info! Thanks @chuckjaz !
from vscode-ng-language-service.
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.
from vscode-ng-language-service.
Related Issues (20)
- routerLink directive with object key in url breaks HTML highlighting HOT 2
- Support SVG templates
- Report a bug that does not exist HOT 2
- Error: Cannot resolve type entity i3.CommonModule to symbol HOT 2
- No error for undefined variables when using *ngIf HOT 7
- Support for Custom Elements HOT 2
- Angular 7 code spaming false positive errors HOT 2
- Types doesn't show in language service for @for loop items HOT 2
- Syntax highlighting breaks after an $any cast HOT 6
- Control Flow syntax highlight curly braces mismatch HOT 2
- Deprecated components
- Syntax highlighting breaks when a line break appears within a template HOT 1
- Property 'ɵunwrapWritableSignal' does not exist on type HOT 38
- Initializing js/ts language features HOT 2
- Syntax highlighting breaks after use dot inside square brackets HOT 2
- error msge HOT 1
- Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) HOT 2
- Support angular.json configuration for tsconfig
- Template fold variable break HOT 1
- Directive scope warnings
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vscode-ng-language-service.