FontAwesome 6 与 Angular 18：“IconDefinition”类型的参数不可分配给“IconName |”类型的参数图标查找'

Question

我已将 Angular 项目从 17 更新到 18，还将 FontAwesome 更新到 6.6.0，将

@fortawesome/angular-fontawesome

更新到 0.15.0。我检查了

package-lock.json

并且所有 FontAwesome 软件包都使用相同的版本。

FontAwesome 之前的版本是 6.5.2 和 0.14.1

@fortawesome/angular-fontawesome

。

根据

@fortawesome/angular-fontawesome

升级说明，我将类型导入从

@fortawesome/fontawesome-svg-core

移至

@fortawesome/angular-fontawesome

但出现以下错误：

✘ [ERROR] TS2345: Argument of type 'IconDefinition' is not assignable to parameter of type 'IconName | IconLookup'.
  Type 'IconDefinition' is not assignable to type 'IconLookup'.
    Types of property 'prefix' are incompatible.
      Type 'import("D:/Project/Frontend/OAKKPortal/OAKKPortal/node_modules/@fortawesome/angular-fontawesome/types").IconPrefix' is not assignable to type 'import("D:/Project/Frontend/OAKKPortal/OAKKPortal/node_modules/@fortawesome/fontawesome-common-types/index").IconPrefix'.
        Type 'string & {}' is not assignable to type 'IconPrefix'. [plugin angular-compiler]

    projects/material-lib/src/lib/util/register-icons.class.ts:43:20:
      43 │     return iconFunc(icon).html.join('');
         ╵                     ~~~~


✘ [ERROR] TS2345: Argument of type 'IconDefinition' is not assignable to parameter of type 'IconName | IconLookup'. [plugin angular-compiler]

    projects/material-lib/src/lib/util/register-icons.class.ts:47:54:
      47 │ ...n sanitizer.bypassSecurityTrustHtml(iconFunc(icon).html.join(''));
         ╵                                                 ~~~~

编译失败的相关代码：

import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import {
  FaIconLibrary,
  IconDefinition,
  IconName,
  IconPrefix,
} from '@fortawesome/angular-fontawesome';
import { icon as iconFunc } from '@fortawesome/fontawesome-svg-core';

export class RegisterFontIcons {
  public static registerMaterialIcons(iconRegistry: MatIconRegistry) {
    // Register the material icon styles
    iconRegistry.registerFontClassAlias(
      'outlined',
      'mat-ligature-font material-icons material-icons-outlined',
    );
  }

  public static registerFontAwesomIcons(iconRegistry: MatIconRegistry) {
    // Set default font set to Font Awesome Solid icons for non-SVG icons
    iconRegistry.setDefaultFontSetClass('fa-solid');
  }

  public static registerFontAwesomSvgIcons(
    iconRegistry: MatIconRegistry,
    sanitizer: DomSanitizer,
    icons: IconDefinition[],
  ) {
    icons.forEach((icon: IconDefinition) => {
      // console.log(icon.prefix, icon.iconName);
      const svg: SafeHtml = RegisterFontIcons.getLiteralSafeSvg(sanitizer, icon);
      if (icon.prefix === 'fas') {
        iconRegistry.addSvgIconLiteral(icon.iconName, svg);
      } else {
        // Only use a namespace for the non-solid icons
        iconRegistry.addSvgIconLiteralInNamespace(icon.prefix, icon.iconName, svg);
      }
    });
  }

  public static getLiteralSvg(icon: IconDefinition): string {
    return iconFunc(icon).html.join('');
  }

  public static getLiteralSafeSvg(sanitizer: DomSanitizer, icon: IconDefinition): SafeHtml {
    return sanitizer.bypassSecurityTrustHtml(iconFunc(icon).html.join(''));
  }

  public static getFontAwesomeIcon(
    faIconLibrary: FaIconLibrary,
    prefix: IconPrefix,
    name: IconName,
  ): IconDefinition {
    return faIconLibrary.getIconDefinition(prefix, name);
  }
}

失败的函数是

getLiteralSvg

和

getLiteralSafeSvg

。

查看

IconLookup

的定义，以下更改也不起作用：

public static getLiteralSvg(icon: IconDefinition): string {
  return iconFunc({ iconName: icon.iconName, prefix: icon.prefix }).html.join('');
}

它给出以下错误：

✘ [ERROR] TS2322: Type 'import("D:/Project/Frontend/OAKKPortal/OAKKPortal/node_modules/@fortawesome/angular-fontawesome/types").IconName' is not assignable to type 'import("D:/Project/Frontend/OAKKPortal/OAKKPortal/node_modules/@fortawesome/fontawesome-common-types/index").IconName'.
  Type 'string & {}' is not assignable to type 'IconName'. [plugin angular-compiler]

    projects/material-lib/src/lib/util/register-icons.class.ts:43:22:
      43 │     return iconFunc({ iconName: icon.iconName, prefix: icon.prefix...
         ╵                       ~~~~~~~~


✘ [ERROR] TS2322: Type 'import("D:/Project/Frontend/OAKKPortal/OAKKPortal/node_modules/@fortawesome/angular-fontawesome/types").IconPrefix' is not assignable to type 'import("D:/Project/Frontend/OAKKPortal/OAKKPortal/node_modules/@fortawesome/fontawesome-common-types/index").IconPrefix'.
  Type 'string & {}' is not assignable to type 'IconPrefix'. [plugin angular-compiler]

    projects/material-lib/src/lib/util/register-icons.class.ts:43:47:
      43 │ ...c({ iconName: icon.iconName, prefix: icon.prefix }).html.join('');
         ╵                                 ~~~~~~

关于如何解决这个问题有什么想法吗？

Answer 1

由于不同库中的类型冲突而导致的错误，

iconFunc

期望的类型来自@fortawesome/fontawesome-common-types库，而不是@fortawesome/angular-fontawesome。

快速的解决方案是用不同的名称来区分类型：

import {
  IconDefinition as CommonIconDefinition,
  IconName as CommonIconName,
  IconPrefix as CommonIconPrefix,
} from '@fortawesome/fontawesome-common-types';

  public static getLiteralSvg(icon: IconDefinition): string {
    return iconFunc({
      iconName: icon.iconName as CommonIconName,
      prefix: icon.prefix as CommonIconPrefix,
    }).html.join('');
  }

  public static getLiteralSafeSvg(
    sanitizer: DomSanitizer,
    icon: IconDefinition
  ): SafeHtml {
    return sanitizer.bypassSecurityTrustHtml(
      iconFunc({
        iconName: icon.iconName as CommonIconName,
        prefix: icon.prefix as CommonIconPrefix,
      }).html.join('')
    );
  }