此问题是由软件包@ 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
更新。 常春藤编译器不会在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
和库的父项目将消除类型为“'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,对于使用已发布库的应用程序,构建都可以正常工作。
问题有两个:
为什么这是一个非常烦人的问题?
这是我最终为解决此问题而做的事情,在某些情况下,这对于某些人来说可能是可以接受的。 对于希望在与此类库的用户相同条件下使用其可发布库的人(例如,来自已发布的npm包),它不会提供帮助:
假设您使用的是monorepo或类似的结构,其中可发布库的源代码可以使用它的应用程序以一致的方式进行访问。
假设该程序包被称为“ happy-library” ...
tsconfig.json
(否则vscode不会解决...),以添加指向该包的路径映射,指向该包的源目录。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扩展,但是正因为如此,我将失去强大的开发...
@schankam : https :
@JonWallsten谢谢,如果我不了解的话,它将很快发布。
v11.1.0中发布的新的Ivy本机语言服务已修复了该
很棒的工作,@ kyliau!
当涉及严格的空检查时,我在模板中看到很多新错误,我们错过了,真的很好!
@kyliau嗯...好奇怪。 我在库中声明的指令也遇到了同样的问题,我遵循了使用--prod开关构建库的建议,从而解决了这个问题。 问题是我已经在使用ALS 11.1.1 ,因此从理论上讲,这不再是一个问题了,对吗?
该项目是一个常规的CLI多项目,带有一些库和一个应用程序。
不确定npm链接...我没有做任何特别的事情。 库的路径在根tsconfig.json中列出。
我有同样的问题。 我使用--prod
标志构建我的库,因此禁用了常春藤。
链接库dist文件夹,将包链接到我的应用程序,然后导入libmodule。 但是仍然出现此错误,因为它不是已知的角度元素。
库中的组件位于declarations
和exports
数组中。
显示该组件,但在vscode中仍然出现此错误。 测试版本:
11.1.3
11.2.1
0.1100.4
我同意,这可能不应该被关闭@kyliau ...我有一个最小的可重现的示例,我针对另一个问题提出了该示例,它也可以用来证明这一点。 看看这个: https : 这个SO帖子一起发布)
只是要澄清一下,在v11.1.x
是不够的,您必须按照此处的说明启用常春藤模式。
您不必更改tsconfig.*.json
。
... is not a known angular element
出现的事实意味着您不处于常春藤模式。
要确定您使用的是哪种模式,请转到Output
面板并查找Angular语言服务。 应该提到常春藤。 (请参见下面的屏幕截图)。
您的项目不必使用Ivy即可使用Ivy语言服务,但是您必须使用Angular> = v9。
如果在验证所有上述内容后,扩展名仍无法按预期工作,请打开一个新的问题以帮助我们进行分类并减少噪音。 非常感谢你!
@kyliau感谢我,我当然错过了这一点。
最有用的评论
在这方面是否有任何进展。