Блог

Мне нужно создать очень простое статическое приложение на основе Angular 12 («статическое» означает, что оно не использует AJAX) и отобразить некоторые значки FontAwesome. Я решил загрузить репозиторий раньше

Я сделал ng add @fortawesome/angular-fontawesome это и выбрал все пакеты значков. Затем я хотел создать страницу политики конфиденциальности с использованием угловой маршрутизации и компонентов. Я делал это раньше, но здесь я не добиваюсь успеха.

Я добавил FontAwesomeModule в модуль приложения

 @NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FontAwesomeModule,
    RouterModule,
  ],
  exports: [
    FontAwesomeModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(fa: FaIconLibrary, faConfig: FaConfig) {
    fa.addIconPacks(fab, fas, far);
    faConfig.fixedWidth = true;
  }
}
 

Затем ComponentsModule импорт PagesModule . Я даже пытался импортировать и экспортировать одновременно FontAwesomeModule .

Ничего.

Если вы посмотрите на шаблон, я могу использовать <fa-icon [icon]="['fab','github']"></fa-icon> синтаксис. Но на странице политики конфиденциальности, несмотря ни на что, я всегда получаю одну и ту же ошибку

 Error: src/app/pages/privacy-policy/privacy-policy.component.html:3:5 - error NG8001: 'fa-icon' is not a known element:
1. If 'fa-icon' is an Angular component, then verify that it is part of this module.
2. If 'fa-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3     <fa-icon fixedWidth="true" [icon]="warning"></fa-icon>
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/pages/privacy-policy/privacy-policy.component.ts:6:16
    6   templateUrl: './privacy-policy.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component PrivacyPolicyComponent.


Error: src/app/pages/privacy-policy/privacy-policy.component.html:3:32 - error NG8002: Can't bind to 'icon' since it isn't a known property of 'fa-icon'.
1. If 'fa-icon' is an Angular component and it has 'icon' input, then verify that it is part of this module.
2. If 'fa-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

3     <fa-icon fixedWidth="true" [icon]="warning"></fa-icon>
                                 ~~~~~~~~~~~~~~~~

  src/app/pages/privacy-policy/privacy-policy.component.ts:6:16
    6   templateUrl: './privacy-policy.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component PrivacyPolicyComponent.
 

Я импортировал FontAwesomeModule в основной модуль приложения в соответствии с инструкциями FA. Но он работает только на главной странице, а не на страницах, содержащихся в подмодуле.

Как я могу это исправить?

Если у вас есть подмодуль, в котором размещен компонент privacypolicy, вам необходимо импортировать модуль FontAwesomeModule в этот подмодуль.

Например, если у вас есть «pagesModule», в котором размещен компонент PrivacyPolicyComponent, добавьте FontAwesomeModule в этот модуль вместо app.module.