时间戳

首页 > 解决方案 > 无法使 fa-icon 在 Angular 子模块中工作

angular - 无法使 fa-icon 在 Angular 子模块中工作

问题描述

我需要基于 Angular 12 创建一个非常简单的静态应用程序（“静态”意味着它不使用 AJAX）并显示一些 FontAwesome 图标。我决定早点上传存储库

我做了ng add @fortawesome/angular-fontawesome并选择了所有图标包。然后我想使用 Angular 路由和组件创建一个隐私政策页面。我以前做过，但我在这里没有成功。

我添加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 说明在应用程序的主模块中导入了。但它仅适用于主页，不适用于子模块中包含的页面。

我怎样才能解决这个问题？

标签： angularfont-awesome

解决方案

如果您有一个托管 PrivacyPolicyComponent 的子模块，那么您需要在该子模块中导入 FontAwesomeModule。

例如，如果您有一个托管 PrivacyPolicyComponent 的“pagesModule”，则在该模块中添加 FontAwesomeModule 而不是 app.module。

推荐阅读