Angular 组件库中的 Font Awesome - FontAwesome：找不到 iconName=times 和 prefix=fas 的图标

Question

我有一个使用 FontAwesome 图标的 Angular 7 组件库。

首先，ng version的输出：

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.10.7
@angular-devkit/build-angular      0.10.7
@angular-devkit/build-ng-packagr   0.10.7
@angular-devkit/build-optimizer    0.10.7
@angular-devkit/build-webpack      0.10.7
@angular-devkit/core               7.0.7
@angular-devkit/schematics         7.0.7
@angular/cdk                       7.1.1
@angular/cli                       7.0.7
@angular/compiler-cli              7.0.4
@angular/language-service          7.0.4
@angular/material                  7.1.1
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.0.7
@schematics/angular                7.0.7
@schematics/update                 0.10.7
ng-packagr                         4.4.5
rxjs                               6.3.3
typescript                         3.1.3
webpack                            4.19.1

以及package.json中的相关花絮：

"@fortawesome/angular-fontawesome": "^0.3.0",
"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/free-regular-svg-icons": "^5.5.0",
"@fortawesome/free-solid-svg-icons": "^5.5.0",

这是我的模块定义：

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';

import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
import { faBars } from '@fortawesome/free-solid-svg-icons/faBars';
import { faCalendarAlt } from '@fortawesome/free-solid-svg-icons/faCalendarAlt';
import { faCaretLeft } from '@fortawesome/free-solid-svg-icons/faCaretLeft';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
import { faSortUp } from '@fortawesome/free-solid-svg-icons/faSortUp';
import { faSortDown } from '@fortawesome/free-solid-svg-icons/faSortDown';
import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp';
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons/faQuestionCircle';
import { faGlobeAmericas } from '@fortawesome/free-solid-svg-icons/faGlobeAmericas';

<app imports>

library.add(
    faAngleDown, faBars, faCalendarAlt, faCaretLeft, faChevronDown,
    faChevronLeft, faChevronUp, faGlobeAmericas, faQuestionCircle, 
    faSignOutAlt, faSortDown, faSortUp, faTimes, faUser
);

@NgModule({
    declarations: [
        <app components>
    ],
    exports: [
        <app components>
    ],
    imports: [
        FontAwesomeModule,
        <other app imports>
    ]
})
export class LibModule {
    public static forRoot(): ModuleWithProviders {
        return {
            ngModule: LibModule,
            providers: [
                <some providers>
            ]
        };
    }
}

这是public_api.ts：

export * from './lib/lib.module';
<component exports>

我可以用 ng build mylib --prod 构建这个模块就好了。但是，当我尝试在应用程序中使用它时，每当使用 --prod 标志来构建或提供服务时，我都会收到以下错误：

FontAwesome: Could not find icon with iconName=times and prefix=fas

这是应用程序的 app.module.ts 文件：

import { faCalendarAlt } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { LibModule } from 'libmodule';

<app imports>

library.add(faCalendarAlt);

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
    ],
    imports: [
        FontAwesomeModule,
        LibModule.forRoot(),
    ]
})
export class AppModule {
}

app.component.ts 使用 faCalendarIcon，并且还从 LibModule 引入组件，这些组件又使用 lib 模块定义中描述的图标。

当使用 ng serve --prod 或 ng build --prod 然后不通过烘焙 angular 开发服务器提供应用程序时，日历图标显示得很好。但是，库组件本身使用的每个图标都没有显示，我在控制台的标题中看到了每个图标的错误。

请注意，当我在没有 prod 标志的情况下使用 ng serve 时不会发生这种情况，因此它可能与 tree-shaking?

有关

如何在库中使用 FontAwesomeModule 并确保库的使用者也能看到图标？我宁愿不必让所有消费者都导入库使用的所有图标。

请注意，我对我的 FontAwesome 图标使用深度导入，我也尝试过 "shallow" 这样的导入：

import {
  faAngleDown,
  faBars,
  faCalendarAlt,
  faCaretLeft,
  faChevronDown,
  faChevronLeft,
  faChevronUp,
  faGlobeAmericas,
  faQuestionCircle,
  faSignOutAlt,
  faSortDown,
  faSortUp,
  faTimes,
  faUser
} from '@fortawesome/free-solid-svg-icons';

我还尝试让我的 lib 模块导出 FontAwesomeModule，而不是导出它。我试过导出每个图标，但似乎不可能。

Answer 1

好的，我们内部解决了。

在库中，刚刚漂浮在库模块定义文件中的 library.add(...) 语句需要移动到模块构造函数中。这解决了问题。

Answer 2

还有一个选择。

创建一个新项目ng new ng-fontawesome
在项目中新建库ng generate library ng-fa
安装超棒的字体包npm install --save @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-regular-svg-icons

更新 projects/ng-fa/src/lib/ng-fa.module.ts 到 import/export fontawesome 模块

import { NgModule } from '@angular/core';
import { NgFaComponent } from './ng-fa.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  declarations: [NgFaComponent],
  imports: [FontAwesomeModule],
  exports: [NgFaComponent, FontAwesomeModule]
})
export class NgFaModule { }

更新 projects/ng-fa/src/lib/ng-fa.component.ts 以使用超棒的图标

import { Component } from '@angular/core';
// import { IconDefinition } from '@fortawesome/fontawesome-common-types';
import { faAddressBook } from '@fortawesome/free-regular-svg-icons';
@Component({
  selector: 'lib-ng-fa',
  template: `
    <fa-icon [icon]="icon"></fa-icon>
  `,
  styles: []
})
export class NgFaComponent {
  // icon: IconDefinition = faAddressBook;
  icon = faAddressBook;
}

更新 src/app/app.module.ts 以按名称（而非相对路径）导入您的库模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgFaModule } from 'ng-fa';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, NgFaModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

添加 npm 脚本以在应用程序之前构建库。在主 package.json 文件的 scripts 标签中，我添加到条目中。
- "build:ng-fa": "ng build ng-fa"
- "prestart": "npm run build:ng-fa"

我用启动命令测试了这个，但你需要为你的构建命令做同样的事情。

然后我运行 npm run start(dev) 和 npm run start -- --prod 测试两个版本，它们工作正常。这大大减少了对所有导入的需求，就像您在上面所做的那样。这里只需要在实际需要的组件中导入图标即可（模块中也不需要）。

我也用这个示例创建了一个 GitHub repo。

Angular 组件库中的 Font Awesome - FontAwesome：找不到 iconName=times 和 prefix=fas 的图标

Angular Font Awesome in a component library - FontAwesome: Could not find icon with iconName=times and prefix=fas

angular

font-awesome-5