错误： projects/custom-lib/src/lib/components/accordion/accordion.component.html：1：1 - 错误 NG8001： 'ngb

Question

因此，我创建了一个角度库项目，我正在我的应用程序源代码中使用该项目，但没有发布(截至目前(。

创建此库的原因是为了设置一些常见组件，这些组件将通过蒙皮(更改scs(ng引导程序库创建，然后在应用程序的各个页面中使用。

到目前为止，我已经成功地剥离了一些没有使用自定义标签的组件，即标签、日期选择器等，一切都如预期一样，我可以将这些组件作为我的库级模块的一部分导出，后来我在应用程序中需要的地方导入了这些模块。

现在，我计划也对ng手风琴进行剥皮，但它与其他提供的组件不同，即它有自定义标签<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中指定了这个标记，以便让angular知道这个来自ng-bootstrap的自定义标记但是构建仍然失败，并出现相同的错误

以下是我的代码片段，

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>

组件.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); 
} 

} 
}

homepage.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-数组中添加此组件