Angular Font Awesome в библиотеке компонентов - FontAwesome: не удалось найти значок с iconName=times и prefix=fas

Question

Angular Font Awesome в библиотеке компонентов - FontAwesome: не удалось найти значок с iconName=times и prefix=fas

У меня есть библиотека компонентов Angular 7, в которой используются значки FontAwesome.

Прежде всего, вывод 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 а затем обслуживать приложение не через запеченный угловой сервер dev. Однако каждый значок, используемый самими компонентами библиотеки, не отображается, и я вижу ошибку из заголовка в консоли для каждого из них.

Обратите внимание, что это не происходит, когда я использую ng serve без флага prod, так что это может быть связано с тряской деревьев?

Как я могу использовать 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, а не экспортировать его. Я пытался экспортировать каждую иконку, но это кажется невозможным.

7

angular font-awesome-5

Источник

user6775271 12 дек '18 в 17:28

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"

Я проверил это с помощью команды запуска, но вам нужно сделать то же самое для вашей команды сборки.

Я тогда побежал npm run start(dev) и npm run start -- --prod чтобы проверить обе сборки, и они работают нормально. Это значительно уменьшает потребность во всем импорте, как вы делаете это выше. Здесь вам нужно импортировать значки только в те компоненты, которые действительно в них нуждаются (не в модуле).

Я также создал репозиторий GitHub с этим примером.

1

Источник

user1874522 13 дек '18 в 19:02

Другие вопросы по тегам angular font-awesome-5

user6775271 13 дек '18 в 16:04 2018-12-13 16:04 · Accepted Answer · 2018-12-13 16:04

Хорошо, мы поняли это изнутри.

В библиотеке library.add(...) операторы, которые были просто плавающими в файле определения модуля библиотеки, должны быть перемещены в конструктор модуля. Это решает проблему.

10

Источник

user6775271 13 дек '18 в 16:04