错误：projects/custom-lib/src/lib/components/accordion/accordion.component.html:1:1 - 错误 NG8001：'ngb-accordion' 不是已知元素

Question

所以，我创建了一个 Angular 库项目，我在我的应用程序源中使用它而不发布（截至目前）。

创建此库的原因是设置一些通用组件，这些组件将通过皮肤（更改 scss）ng-bootstrap 库创建，然后在应用程序的各个页面中使用。

到目前为止，我已经成功地为一些没有使用自定义标签的组件（即选项卡、日期选择器等）进行了皮肤处理，并且它们都按预期工作，我可以将它们导出为我的库级模块的一部分，然后在需要时导入这些模块在我的应用中。

现在，我还计划对 ng-accordion 进行蒙皮，但它与其他提供的组件不同，即它具有自定义标签 <ngb-accordion> 、 <ngb-panel> 等。使用它会给我以下错误（在构建时），

Error: projects/custom-lib/src/lib/components/accordion/custom-lib-accordion.component.html:1:1 - error NG8001: 'ngb-accordion' is not a known element: 
1. If 'ngb-accordion' is an Angular component, then verify that it is part of this module. 
2. If 'ngb-accordion' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

我尝试了什么？

我认为这个错误的原因是在库构建过程中使用的自定义标签 angular 无法理解并最终抛出这个。因此，我将@angular/elements 包添加到我的项目中，并在customElements 中指定了这个标签，以便从角度了解这个来自ng-bootstrap 的自定义标签。 但构建仍然失败并出现同样的错误。

下面是我的代码sn-p，

component.html

<ngb-accordion #acc="ngbAccordion" class="custom-accordion" (panelChange)="changeArrow($event,acc)"> 
  <ngb-panel *ngFor="let faq of faqs" id="faq-{{faq.id}}"> 
    <ng-template ngbPanelHeader> 
      <h5 class="custom-accordion__title_text">{{ faq.question }}</h5> 
      <div class="custom-accordion__title_button"> 
        <button class="btn btn-link p-0" ngbPanelToggle> 
          <ng-container *ngIf="selectedPanelId.includes(faq.id)"> 
            <ng-container *ngIf="closeOpenedPanel"> 
              <i class="custom-icon custom-down-icon"></i> 
            </ng-container> 
            <ng-container *ngIf="!closeOpenedPanel"> 
              <i class="custom-icon custom-up-icon"></i> 
            </ng-container> 
          </ng-container> 
          <ng-container *ngIf="!selectedPanelId.includes(faq.id)"> 
            <i class="custom-icon custom-down-icon"></i> 
          </ng-container> 
        </button> 
      </div> 
    </ng-template> 
    <ng-template ngbPanelContent> {{faq.answer}} </ng-template> 
  </ngb-panel> 
</ngb-accordion>

component.ts

import { Component, Input } from '@angular/core'; 
import { NgbPanelChangeEvent } from '@ng-bootstrap/ng-bootstrap'; 
 
export interface FAQ { 
  id: string; 
  question: string; 
  answer: string; 
} 
 
@Component({ 
  selector: 'custom-accordion', 
  templateUrl: './custom-accordion.component.html', 
  styles: [` 
      @import "variables/variables"; 
 
      @include custom-media(">sm") { 
      ::ng-deep .card { 
        .card-header { 
          justify-content: space-between; 
          padding: 1.5rem 0; 
          margin-bottom: 0; 
        } 
        .card-body { 
          padding: 0; 
        } 
        .collapse { 
          &.show { 
            font-size: 1rem; 
            padding: 0 0 1.5rem 0; 
            margin: 0; 
            max-width: 70%; 
          } 
        } 
      } 
 
      &__title_text { 
        font-size: 0.875rem; 
        max-width: 70%; 
        padding-right: 0; 
      } 
     } 
  `], 
}) 
export class CustomAccordionComponent { 
  @Input() public faqs: FAQ[]; 
  closeOpenedPanel: boolean = false; 
  selectedPanelId: string = 'ngb-panel-'; 
 
  constructor() { } 
 
  /** 
   * To change the accordion arrow direction 
   * we check the current active-panel (clicked/interacted) 
   * first and then also check whether the panel is currently open. 
   */ 
  changeArrow($event: NgbPanelChangeEvent, acc: any) { 
    this.selectedPanelId = $event.panelId; 
    if (acc.isExpanded(this.selectedPanelId)) { 
      this.closeOpenedPanel = true; 
    } else { 
      this.closeOpenedPanel = false; 
    } 
  } 
}

module.ts - 这将导出上面创建的自定义组件。

import { Injector, NgModule } from '@angular/core'; 
import { createCustomElement } from '@angular/elements'; 
import { NgbAccordionModule, NgbAccordion, NgbAccordionConfig, NgbPanel } from '@ng-bootstrap/ng-bootstrap'; 
import { CustomAccordionComponent } from './custom-accordion.component'; 
import { CommonModule } from '@angular/common'; 
import { BrowserModule } from '@angular/platform-browser'; 
 
 
@NgModule({ 
    imports: [CommonModule, BrowserModule, NgbAccordionModule], 
    declarations: [CustomAccordionComponent], 
    entryComponents: [CustomAccordionComponent], 
}) 
export class CustomAccordionModule { 
    constructor(private injector: Injector) { } 
 
    public ngDoBootstrap(): void { 
 
        const c1: any = createCustomElement(CustomAccordionComponent , { injector: this.injector }); 
 
        if (!customElements.get('ngb-accordion')) { 
            customElements.define('ngb-accordion', c1); 
        } 
 
    } 
}

home.page.html - 用法。

<custom-accordion [faqs]="faqs"></custom-accordion>

home.module.ts

@NgModule({ 
  imports: [ 
    CommonModule, 
    CustomModule, 
    ComponentsModule, 
    PageRoutingModule, 
    NgbModule, 
    ReactiveFormsModule, 
    FormsModule, 
  ], 
  declarations: [...], 
  schemas: [CUSTOM_ELEMENTS_SCHEMA] 
}) 
export class HomeModule { }

不确定，我错过了什么。当在应用程序中立即使用相同的代码时，它工作得很好。因此，我确信是这个自定义的ngb-accordion 标签导致了这种情况。如果你能指出来，请给我一个解决这个问题的方向。

Answer 1

当您创建自定义元素（Web 组件）时，Angular 只是不知道这是您要使用的组件。

在您使用该组件的模块中，您需要添加CUSTOM_ELEMENTS_SCHEMA，如下所示：

@NgModule({
// imports, exports, etc
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

您可能还缺少在声明模块的exports-array 中添加此组件