Vscode-ng-language-service: Angular Language Service从使用Ivy构建的库中看不到组件。

创建于 2019-12-05  ·  23评论  ·  资料来源: angular/vscode-ng-language-service

🐞错误报告

受影响的包裹

此问题是由软件包@ angular / language-service引起的

描述

Angular Language Service从使用Ivy构建的库中看不到组件。
应用程序正确构建。

错误


'lib-component' is not a known element:
1. If 'lib-component' is an Angular component, then verify that it is part of this module.
2. If 'lib-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ng(0)

环境


Editor: VisualStudio Code
Editor extension: angular.ng-template v0.900.0

Angular CLI: 9.0.0-rc.5
Node: 10.17.0
OS: darwin x64

Angular: 9.0.0-rc.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.900.0-rc.5
@angular-devkit/build-angular      0.900.0-rc.5
@angular-devkit/build-ng-packagr   0.900.0-rc.5
@angular-devkit/build-optimizer    0.900.0-rc.5
@angular-devkit/build-webpack      0.900.0-rc.5
@angular-devkit/core               9.0.0-rc.5
@angular-devkit/schematics         9.0.0-rc.5
@angular/cdk                       9.0.0-rc.4
@ngtools/webpack                   9.0.0-rc.5
@schematics/angular                9.0.0-rc.5
@schematics/update                 0.900.0-rc.5
ng-packagr                         9.0.0-rc.3
rxjs                               6.5.3
typescript                         3.6.4
webpack                            4.41.2
bug ivy

最有用的评论

在这方面是否有任何进展。

所有23条评论

更新。 常春藤编译器不会在project_root/dist/lib-name创建文件lib-name.metadata.json project_root/dist/lib-name
这可能是问题吗?

+1我有同样的问题

在版本9之后,我们将切换语言服务内部以使用Ivy编译器。 在此之前,语言服务将需要依赖metadata.json来检索有关指令的其他信息。

是的,这是问题所在。 要暂时解决,您将需要构建库的生产版本,该版本在tsconfig中具有"enableIvy": false 。 然后,这将生成dist文件夹中所需的元数据文件。

ng build lib-component --prod

但是您还需要确保在每次构建vs代码后都确保Restart Angular Language service

在vs代码插件和angular本身之间不容易找到所有这些信息。 遇到其他同样问题的人请注意。

我的假设是

@jiverson关于您的解决方法ng build lib-component --prod对我来说会产生错误An unhandled exception occurred: Configuration 'production' is not set in the workspace. ,在其他地方,我已经看到有证据表明库的--prod标志不再相关。 我正在使用@ angular / cli v8.3.25 ...因此,尽管此问题已被称为#665的可能重复,但我不确定是否是。 有什么想法吗? / cc @ayazhafiz

有任何更新吗? 我们有自己的库,甚至在产品中都在ivy中开发和发布。

正在将语言服务移至Ivy后端的工作正在进行中!

我可以确认是否这样做:

  • ng build my-library --prod
  • ctrl + shift + p,然后选择“重新启动Angular语言服务器”

库的父项目将消除类型为“'xyz'不是已知元素”的错误。

据我了解,这是因为--prod将(其中包括)在dist文件夹中生成my-library.metadata.json文件,然后语言服务器将使用该文件来识别已定义的组件选择器在我的图书馆。

现在,人们会希望,如果我用ng build my-library --prod构建的npm publish库,然后将npm install到其他Angular应用中,则语言服务器将看到已安装的元数据文件npm软件包(在node_modules文件夹中),并且不会报告“'xyz'不是已知元素”。

然而,这是不按预期工作,我可以看到同样的错误中,有一个项目npm install代管我库,即使元数据JSON存在于node_modules我的库文件夹中的文件。

这将是与本期相同的错误还是不同的错误?

还是有一些其他(或其他)神奇的按键组合可以按下或提供给语言服务器,以便其正确处理npm install ed Angular库?

看来,Ivy的新工作方式是依靠.d.ts文件中的元数据,而不再依赖metadat.json文件中的元数据。 --prod构建正常工作的唯一原因是因为您的tsconfig将enableIvy设置为false(angular建议用于npm发布的库)。 这是语言服务问题,而不是angular cli问题,因为无论使用或不使用Ivy,对于使用已发布库的应用程序,构建都可以正常工作。

问题有两个:

  1. Ivy删除了ALS和其他工具所需的metadata.json文件
  2. ALS当前不够聪明,无法从Ivy元数据而不是.metadata.json获取信息

为什么这是一个非常烦人的问题?

  • 常春藤是必经之路,而图书馆开发人员也将使其成为必经之路,
  • 在基于Ivy的应用程序项目中创建库时,您仍然想端到端地在应用程序中使用Ivy,同时仍然要保持良好的公民身份,并将可重用的库发布到npm,以供其他人使用。
  • 大多数开发人员在应用程序开发过程中都使用npm链接或将tsconfig指向库dist目录进行导入,无论如何这是显而易见的方式,
  • vscode将您库中的内容标记为未知,这真是令人讨厌,

这是我最终为解决此问题而做的事情,在某些情况下,这对于某些人来说可能是可以接受的。 对于希望在与此类库的用户相同条件下使用其可发布库的人(例如,来自已发布的npm包),它不会提供帮助:

假设您使用的是monorepo或类似的结构,其中可发布库的源代码可以使用它的应用程序以一致的方式进行访问。

假设该程序包被称为“ happy-library” ...

  1. 编译(使用--prod),然后像往常一样将库包发布到npm。 您必须使用--prod并在构建配置中禁用Ivy,
  2. 在工作区根目录中更新tsconfig.json (否则vscode不会解决...),以添加指向该包的路径映射,指向该包的源目录。
  3. 将该包导入应用程序代码中,就好像是从node_modules中导入该包一样,即import {whatever} from 'happy-library';
    "paths": {
      "happy-library": ["libs/happy-library/src/index.ts"]
    }

这不是完美的,但是至少我可以在我自己开发的端到端Ivy应用程序中使用我自己的库,而不会遇到vscode中的错误,同时仍然可以共享爱并将其发布给NPM以供其他用户使用,而我不必不断地建立/ npm链接并调试为什么ALS不起作用。

如果我可能错过了一些东西,请对反馈感兴趣...

PS:使用此方法在https://github.com/abdes/happy-coding上可以正常使用的仓库

在这方面是否有任何进展。

似乎可以在计划于11月进行的Angular 11上进行Beta测试。

参见https://github.com/angular/vscode-ng-language-service/issues/335#issuecomment -693545000

我正在我的项目中运行Angular 11(该库也由Angular 11内置,带有--prod标志),并且存在@nprasovict描述的问题。 我在Gitlab软件包上发布了我的库,当我使用npm install将其安装在我们的项目中时,Angular Language Service无法识别从库导出的组件。 看起来这已经是很长一段时间的问题了,我们什么时候才能解决?

我想我现在最终将删除VSCode扩展,但是正因为如此,我将失去强大的开发...

@schankamhttps :

@JonWallsten谢谢,如果我不了解的话,它将很快发布。

v11.1.0中发布的新的Ivy本机语言服务已修复了该

很棒的工作,@ kyliau!
当涉及严格的空检查时,我在模板中看到很多新错误,我们错过了,真的很好!

@kyliau嗯...好奇怪。 我在库中声明的指令也遇到了同样的问题,我遵循了使用--prod开关构建库的建议,从而解决了这个问题。 问题是我已经在使用ALS 11.1.1 ,因此从理论上讲,这不再是一个问题了,对吗?
该项目是一个常规的CLI多项目,带有一些库和一个应用程序。
不确定npm链接...我没有做任何特别的事情。 库的路径在根tsconfig.json中列出。

我有同样的问题。 我使用--prod标志构建我的库,因此禁用了常春藤。
链接库dist文件夹,将包链接到我的应用程序,然后导入libmodule。 但是仍然出现此错误,因为它不是已知的角度元素。
库中的组件位于declarationsexports数组中。

显示该组件,但在vscode中仍然出现此错误。 测试版本:

11.1.3
11.2.1
0.1100.4

我同意,这可能不应该被关闭@kyliau ...我有一个最小的可重现的示例,我针对另一个问题提出了该示例,它也可以用来证明这一点。 看看这个: https : 这个SO帖子一起发布

我会走得更远了一步,如果我添加了"enableIvy": false该选项下的angularCompilerOptionstsconfig.lib.json中肯此评论,因为我已经在做这个分支我的例子回购,我的错误在vscode中消失了(授予我的示例项目仍然以我不理解的某种方式被破坏了)

只是要澄清一下,在v11.1.x是不够的,您必须按照此处的说明启用常春藤模式。
您不必更改tsconfig.*.json
... is not a known angular element出现的事实意味着您不处于常春藤模式。
要确定您使用的是哪种模式,请转到Output面板并查找Angular语言服务。 应该提到常春藤。 (请参见下面的屏幕截图)。
您的项目不必使用Ivy即可使用Ivy语言服务,但是您必须使用Angular> = v9。

Screen Shot 2021-02-01 at 3 15 40 PM

如果在验证所有上述内容后,扩展名仍无法按预期工作,请打开一个新的问题以帮助我们进行分类并减少噪音。 非常感谢你!

@kyliau感谢我,我当然错过了这一点。

此页面是否有帮助?
0 / 5 - 0 等级