I am getting error

Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "ngbAccordion" ("
    <p *ngIf="spinner" class="text-center margin-100">Loading...</p>

    <ngb-accordion [ERROR ->]#acc="ngbAccordion" activeIds="ngb-panel-0">
      <ngb-panel title="Simple">
        <ng-template "): ng:///SurveysModule/SurveysComponent.html@4:19
'ngb-panel' is not a known element:
1. If 'ngb-panel' is an Angular ponent, then verify that it is part of this module.
2. If 'ngb-panel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this ponent to suppress this message. ("

    <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
      [ERROR ->]<ngb-panel title="Simple">
        <ng-template ngbPanelContent>
    <table class="table table-bord"): ng:///SurveysModule/SurveysComponent.html@5:6
'ngb-accordion' is not a known element:
1. If 'ngb-accordion' is an Angular ponent, 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 ponent to suppress this message. ("
    <p *ngIf="spinner" class="text-center margin-100">Loading...</p>

based on this code

  <section>
    <p *ngIf="spinner" class="text-center margin-100">Loading...</p>

    <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
      <ngb-panel title="Simple">
        <ng-template ngbPanelContent>
    <table class="table table-bordered" *ngIf="surveyFormData.length">
        <thead>
        <tr>
            <th scope="col">Form Type</th>
            <th scope="col" class="width-110">Registry Type</th>
            <th scope="col" class="width-70">Version</th>
            <th scope="col" class="width-150">Published Status</th>
            <th scope="col" class="width-100">Active Status</th>
            <th scope="col" class="width-260 text-center">Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let form of surveyFormData">
            <th scope="row">{{ form.FormType }}</th>
            <th scope="row">{{form.RegistryID | registryType}}</th>
            <th scope="row">{{form.Version }}</th>
            <th scope="row">{{form.IsPublished ? 'Published' : 'Unpublished'}}</th>
            <th scope="row">{{form.IsActive ? 'Active' : 'Inactive'}}</th>
            <td class="text-nowrap">
                <a href="javascript:;" (click)="exportSpecs(form)" title="Export Specs" class="record-action">
                    <i class="material-icons">input</i>
                    <span>Export Specs</span>
                </a>
                <a href="javascript:;" (click)="publishForm(form)" title="Publish" class="record-action" [class.disabled]="form.IsPublished">
                    <i class="material-icons">publish</i>
                    <span>Publish</span>
                </a>

                <a href="javascript:;" (click)="confirmFormActivation(form)" title="Activate" class="record-action" [class.disabled]="form.IsActive">
                    <i class="material-icons">toggle_on</i>
                    <span>Activate</span>
                </a>

                <a routerLink="/records/playground/{{form.FormType}}/{{form.Version}}" title="View form in Playground"
                   class="record-action">
                    <i class="material-icons">visibility</i>
                    <span>View</span>
                </a>
                <a routerLink="/survey-builder/{{form.FormType}}/{{form.RegistryID}}/{{form.Version}}"
                   title="Edit Survey" class="record-action">
                    <i class="material-icons">create</i>
                    <span>Edit</span>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
  </ng-template>
</ngb-panel>
</ngb-accordion>

</section>

I am getting error

Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "ngbAccordion" ("
    <p *ngIf="spinner" class="text-center margin-100">Loading...</p>

    <ngb-accordion [ERROR ->]#acc="ngbAccordion" activeIds="ngb-panel-0">
      <ngb-panel title="Simple">
        <ng-template "): ng:///SurveysModule/SurveysComponent.html@4:19
'ngb-panel' is not a known element:
1. If 'ngb-panel' is an Angular ponent, then verify that it is part of this module.
2. If 'ngb-panel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this ponent to suppress this message. ("

    <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
      [ERROR ->]<ngb-panel title="Simple">
        <ng-template ngbPanelContent>
    <table class="table table-bord"): ng:///SurveysModule/SurveysComponent.html@5:6
'ngb-accordion' is not a known element:
1. If 'ngb-accordion' is an Angular ponent, 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 ponent to suppress this message. ("
    <p *ngIf="spinner" class="text-center margin-100">Loading...</p>

based on this code

  <section>
    <p *ngIf="spinner" class="text-center margin-100">Loading...</p>

    <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
      <ngb-panel title="Simple">
        <ng-template ngbPanelContent>
    <table class="table table-bordered" *ngIf="surveyFormData.length">
        <thead>
        <tr>
            <th scope="col">Form Type</th>
            <th scope="col" class="width-110">Registry Type</th>
            <th scope="col" class="width-70">Version</th>
            <th scope="col" class="width-150">Published Status</th>
            <th scope="col" class="width-100">Active Status</th>
            <th scope="col" class="width-260 text-center">Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let form of surveyFormData">
            <th scope="row">{{ form.FormType }}</th>
            <th scope="row">{{form.RegistryID | registryType}}</th>
            <th scope="row">{{form.Version }}</th>
            <th scope="row">{{form.IsPublished ? 'Published' : 'Unpublished'}}</th>
            <th scope="row">{{form.IsActive ? 'Active' : 'Inactive'}}</th>
            <td class="text-nowrap">
                <a href="javascript:;" (click)="exportSpecs(form)" title="Export Specs" class="record-action">
                    <i class="material-icons">input</i>
                    <span>Export Specs</span>
                </a>
                <a href="javascript:;" (click)="publishForm(form)" title="Publish" class="record-action" [class.disabled]="form.IsPublished">
                    <i class="material-icons">publish</i>
                    <span>Publish</span>
                </a>

                <a href="javascript:;" (click)="confirmFormActivation(form)" title="Activate" class="record-action" [class.disabled]="form.IsActive">
                    <i class="material-icons">toggle_on</i>
                    <span>Activate</span>
                </a>

                <a routerLink="/records/playground/{{form.FormType}}/{{form.Version}}" title="View form in Playground"
                   class="record-action">
                    <i class="material-icons">visibility</i>
                    <span>View</span>
                </a>
                <a routerLink="/survey-builder/{{form.FormType}}/{{form.RegistryID}}/{{form.Version}}"
                   title="Edit Survey" class="record-action">
                    <i class="material-icons">create</i>
                    <span>Edit</span>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
  </ng-template>
</ngb-panel>
</ngb-accordion>

</section>

I thought I was following https://ng-bootstrap.github.io/#/ponents/accordion/examples correctly.

Seems to be installed and included in imports correctly

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';


@NgModule({

    declarations: [
        AppComponent
    ],
    imports: [
        NgbModule,

• javascript
• angular
• ng-bootstrap

1 Answer 1

Angular ponents are module-scoped so my advice is to import NgbModule in SurveysModule

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';


@NgModule({
    ...
    imports: [
        NgbModule,
    ]
})
export class SurveysModule {}