Vscode-ng-language-service: Doest无法与Angular HTML模板和VS代码一起使用

创建于 2018-01-22 · 41评论 · 资料来源: angular/vscode-ng-language-service

我不确定自己在做什么错，但是安装此模板后，我无法使用VS Code获得对Angular HTML模板的任何智能感知或编辑器支持。我既看不到任何颜色编码也没有智能感知，所有的事情都像现在在记事本中那样用Angular HTML模板手工输入。

bug

资料来源

jontiefer

👍15

最有用的评论

我正在使用Angular CLI v1.6.4
Angular语言服务：5.2.1
打字稿：2.6.2

直到两天前，我的HTML模板中都有智能感知和文件引用链接。现在似乎缺少该功能。认为最新版本导致我的当前设置出现问题（看到扩展名最近自动更新）

briancodes 于 2018-01-25

👍6

所有41条评论

@jontiefer您是否看过VS Code的输出部分？您可以在此处找到Language-Service插件的日志，该日志可能会提供有关您的案例的更多详细信息。

tkoenig89 于 2018-01-22

相关：＃214

ankemp 于 2018-01-23

您可以尝试＃214中提到的解决方法吗？

chuckjaz 于 2018-01-24

我正在使用Angular CLI v1.6.4
Angular语言服务：5.2.1
打字稿：2.6.2

briancodes 于 2018-01-25

👍6

我在＃214中尝试了变通方法，但似乎没有任何改变。也许我做错了吗？我疲倦地运行它时，都没有看到Angular Language Service版本发生变化。我只是运行yarn remove @angular/language-service ，然后关闭VSCode并再次将其重新打开。

这是我刚在html文件上打开VSCode，然后尝试将鼠标悬停在半完成的变量名称上的内容：

Search path: c:/git/PrimeCore/Prime.Core/ClientApp/app/vendor/tool-view
Config file name: c:/git/PrimeCore/Prime.Core/tsconfig.json
Angular Language Service: 5.2.1
TypeScript: 2.6.2
getTemplateReferences: 3446ms
Add recursive watcher for: c:/git/PrimeCore/Prime.Core
Opened configuration file c:/git/PrimeCore/Prime.Core/tsconfig.json
getTemplateReferences: 0ms
Angular Language Service: 5.2.1
TypeScript: 2.6.2
getTemplateReferences: 27ms
getDiagnostics: 4ms
getHoverAt: 0ms
getHoverAt: 1ms

之后， getHoverAt和getCompletions总是花费0ms，并且不提供任何选择。

rfuhrer 于 2018-01-25

@rfuhrer是否在yarn remove之后运行yarn install yarn remove以更新node_modules？也许yarn clean cache 。听起来语言服务仍然存在。
今天有一个VSCode的新更新-看看是否有什么不同

briancodes 于 2018-01-26

删除某些东西后，您不必执行yarn install或yarn cache clean ，因为yarn实际上可以使您的node_modules保持最新状态。我仔细检查了一下，删除后语言服务文件夹丢失了，重新添加后又出现了。
我还在运行今天发布的VSCode。

HTML和.ts之间似乎有点脱节，这是因为您可以看到语言服务在.ts文件中时在做事，并且显示了所有不错的intellisense内容：

Search path: c:/git/PrimeCore/Prime.Core/node_modules/@angular/material/dialog/typings
Config file name: c:/git/PrimeCore/Prime.Core/tsconfig.json
getTemplateReferences: 0ms
getTemplateReferences: 0ms
getTemplateReferences: 0ms
getCompletions: 1ms
getDiagnostics: 0ms
getHoverAt: 0ms
getHoverAt: 1ms
getCompletions: 0ms

rfuhrer 于 2018-01-26

您是否尝试了扩展名0.1.8 ？

220应该解决这个问题。

chuckjaz 于 2018-01-26

是的，它会自动将扩展名更新为@briancodes 。我可以手动尝试使用VSIX安装它，但扩展屏幕上显示为0.18

rfuhrer 于 2018-01-26

👍1

Angular Language Service: 5.2.1被打印两次的事实表明为请求创建了第二个项目。这表明语言服务没有.html文件被项目引用。

您使用的templateUrl值是多少？该项目可以在AOT中正常编译吗？

chuckjaz 于 2018-01-26

@briancodes可以产生一个我可以克隆的复制此项目的项目吗？

chuckjaz 于 2018-01-26

同样，升级到0.1.8后，它停止在.html文件中工作。我很想尝试找出问题所在:)。

kukjevov 于 2018-01-26

对我来说也很糟糕：

Angular Language Service: 5.2.1
TypeScript: 2.6.2

我已经应用了变通方法＃214，但仍然无法正常工作。

m-ghaoui 于 2018-01-26

👍1

@chuckjaz嗨。我使用最新的CLI和Angular版本（今天已更新为最新的稳定发布的CLI）创建了一个新项目。还具有最新的稳定VSCode版本

https://github.com/briancodes/language-ext-issue217

我将详细介绍README.md文件中发生的事情

注意：我在remove-angular-language-service分支中添加了npm uninstall @angular/language-service 。做了npm cache verify ， npm install并重新启动了VSCode。

项目默认使用Typescript "typescript": "~2.5.3"
VSCode的TypeScript版本是2.6.2，所以我更新了项目以也使用2.6.2 （相同的结果）
将Angular Project和VSCode更改为都使用TypeScript v2.5.3 （相同的结果）

briancodes 于 2018-01-26

👍1

Angular语言服务：5.2.1
扩展版本：0.1.8
TypeScript版本：2.4.2、2.6.2、2.5.3、2.7.0-内部

一切都失败了……紧急情况，没有它就无法工作！

snys98 于 2018-01-26

在使用Angular 5.2.2，TypeScript 2.6.2和VS Code 1.19.3的HTML模板上，0.1.8都不适合我。

我的解决方法当前是将vscode-ng-language-service还原到此处找到的0.1.7： https ：

ryanbuening 于 2018-01-26

👍2

可以确认恢复到0.1.7可以使所有功能再次正常运行，尽管使用的是最新版本的angular，typescript和VSCode

rfuhrer 于 2018-01-26

@briancodes我克隆了https://github.com/briancodes/language-ext-issue217 ，它对我有用。

我怀疑这可能是Windows上的路径问题，所以我现在正在尝试。

chuckjaz 于 2018-01-26

👍1

出于兴趣@ryanbuening ，还原扩展名的过程是什么？我猜想VSCode不支持

briancodes 于 2018-01-26

@briancodes还原，在5分钟内弹出＃223，并将其命名为0.1.9😄。这个扩展应该只是1.0版本，它是如此有用，“ experimental”标签可能会吓到一些更保守的用户。 🎉

我敢肯定这只是一个愚蠢的/ vs \错误或同样令人讨厌的东西，这要归功于Windows惊人的路径

rfuhrer 于 2018-01-26

@briancodes我在Windows中复制了此代码。现在进行调查。

chuckjaz 于 2018-01-26

👍3

出于兴趣@ryanbuening ，还原扩展名的过程是什么？我猜想VSCode不支持

@briancodes您需要禁用自动更新扩展，然后选择从VSIX安装...

ryanbuening 于 2018-01-26

👍1

这是一个路径问题，我没有意识到TypeScript的明显变化。

我们在初始化编译器时将path.join()直接传递给TypeScript，我们应该调用path.posix.join() 。

临时解决方法是更改行：

containingFile = path.join(this.options.basePath, 'index.ts');

至：

containingFile = path.posix.join(this.options.basePath, 'index.ts');

在@angular/language-service软件包中的文件language-service.umd.js中。

我将在@angular/language-service进行此更改并更新扩展名。

chuckjaz 于 2018-01-26

🎉2 👍2

@briancodes @jontiefer @ryanbuening你们中的一个（或线程中的任何其他人）可以在Windows上使用您的项目测试https://github.com/angular/vscode-ng-language-service/releases/tag/0.1.9吗？

我相信这可以解决Windows问题，如上所述。

chuckjaz 于 2018-01-27

👍3 ❤1 😕1 🎉1

@chuckjaz大成功！

rfuhrer 于 2018-01-27

@rfuhrer谢谢！

chuckjaz 于 2018-01-27

@chuckjaz直到停止工作，我才意识到我对这种语言扩展的依赖程度：-)很好

briancodes 于 2018-01-27

👍3

好东西！经验教训：下次我将在评论时提及我在Windows上。

m-ghaoui 于 2018-01-27

再次遇到同样的问题。
平台：Windows

PS C:\Dev\Programming\Ang5Tutorial\angular-tour-of-heroes> npm list @angular/language-service
[email protected] C:\Dev\Programming\Ang5Tutorial\angular-tour-of-heroes
`-- @angular/[email protected]

PS C:\Dev\Programming\Ang5Tutorial\angular-tour-of-heroes> npm list typescript
[email protected] C:\Dev\Programming\Ang5Tutorial\angular-tour-of-heroes
+-- @angular/[email protected]
| +-- @angular-devkit/[email protected]
| | `-- [email protected]
| `-- @schematics/[email protected]
|   `-- [email protected]
`-- [email protected]

PS C:\Dev\Programming\Ang5Tutorial\angular-tour-of-heroes>

也许我很无聊？

michaeljmonte 于 2018-02-10

也许我不明白该如何使用该插件。
但是我只是在“贡献”选项卡中看到“ Angular模板”的文件扩展名是.ng ， .ngml和.ng.html 。
当我将模板文件的扩展名从.html更改为.ng.html时，该语言已更改为AngularTemplate，并且开始接收以前从未接收到的intelisense值。例如：* ngIf，* ngFor和组件属性。我现在也可以单击事件或方法，然后将其重定向到.ts文件。
但是我松了标签颜色。