接口“HTMLIonIconElement”无法同时扩展类型“IonIc on”和“HTMLStencilElement”

Question

我刚刚通过运行

ng update

将我的 Angular ionic 应用程序升级为使用 Angular 12 中的 Angular v13。更新成功，但现在我无法运行该应用程序，并出现以下错误

[ng] Error: node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIc
on' and 'HTMLStencilElement'.
[ng]   Named property 'ariaHidden' of types 'IonIcon' and 'HTMLStencilElement' are not identical.
[ng]
[ng] 66     interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
[ng]                  ~~~~~~~~~~~~~~~~~~
[ng]
[ng]
[ng] Error: node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIc
on' and 'HTMLStencilElement'.
[ng]   Named property 'ariaLabel' of types 'IonIcon' and 'HTMLStencilElement' are not identical.
[ng]
[ng] 66     interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
[ng]                  ~~~~~~~~~~~~~~~~~~
[ng]
[ng]
[ng] Error: node_modules/typescript/lib/lib.dom.d.ts:4632:101 - error TS2344: Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.
[ng]   Type 'HTMLElement | HTMLMetaElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | ... 151 more ... | HTMLMarqueeElement' is not assigna
ble to type 'Element'.
[ng]     Type 'HTMLIonIconElement' is not assignable to type 'Element'.
[ng]       Property 'ariaHidden' is optional in type 'HTMLIonIconElement' but required in type 'Element'.
[ng]
[ng] 4632     getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
[ng]                                                                                                          ~~~~~~~~~~~~~~~~~~~~~~~~
[ng]
[ng]
[ng] Error: node_modules/typescript/lib/lib.dom.d.ts:4953:101 - error TS2344: Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.
[ng]   Type 'HTMLElement | HTMLMetaElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | ... 151 more ... | HTMLMarqueeElement' is not assigna
ble to type 'Element'.
[ng]
[ng] 4953     getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
[ng]        

问题是所有被投诉的文件都在node_modules目录中。我该如何解决这个问题？

Answer 1

对我来说，我只是在 tsconfig.json 中添加了

"skipLibCheck": true,

，请参阅下面的代码：

Answer 2

好像

ng update

更新了typescript版本到4.4，但是ionic ion-icon似乎与这个版本的typescript不兼容。

我当前使用的修复是恢复到 TypeScript 版本 4.3.5

如何执行此降级：

更新你的package.json -> 替换：

"typescript": "~4.4.4"

与

"typescript": "~4.3.5"

然后运行 ->

npm install

如果有人有更多关于这种不兼容的根本原因以及解决此问题的其他方法的信息，我非常感兴趣，因为我非常想升级到 typescript 4.4。

Answer 3

谢谢对我有用... 在 tsconfig.json 文件中

{ “compileOnSave”：假， “编译器选项”：{ “skipLibCheck”：正确， "baseUrl": "./", "outDir": "./dist/out-tsc", “源地图”：正确， “声明”：错误， “downlevelIteration”：真， “experimentalDecorators”：正确， “模块”：“es2020”， "moduleResolution": "节点", “导入助手”：正确， “目标”：“es2015”，

"lib": ["es2018", "dom"]

}, “角度编译器选项”：{ “fullTemplateTypeCheck”：true， “严格注入参数”：true } }