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然后不通过烘焙的角度开发服务器提供应用程序服务时，日历图标显示得很好。但是，库组件本身使用的每个图标都不会显示，我从控制台标题中看到了每个图标的错误。

请注意，当我在没有prod标志的情况下使用ng serve时不会发生这种情况，因此它可能与摇树有关吗？

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

请注意，我在我的FontAwesome图标中使用了深度导入，我也尝试过这样的“浅”导入：

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 { 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脚本以使该库在应用程序之前被构建。在主scripts文件的package.json标签中，我添加了条目。
- "build:ng-fa": "ng build ng-fa"
- "prestart": "npm run build:ng-fa"

我用start命令测试了这一点，但是您需要为build命令做同样的事情。

然后，我分别运行npm run start（dev）和npm run start -- --prod来测试两个构建，它们都工作正常。如上所述，这大大减少了对所有导入的需求。在这里，您只需要将图标导入实际需要它们的组件中（也不需要在模块中）。

我也为此示例创建了一个GitHub repo。

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

2 个答案: