title: Template parse errors using ng-bootstrap
body: <p>I am getting error</p>
  
  <pre><code>Uncaught Error: Template parse errors:
  There is no directive with "exportAs" set to "ngbAccordion" ("
      &lt;p *ngIf="spinner" class="text-center margin-100"&gt;Loading...&lt;/p&gt;
  
      &lt;ngb-accordion [ERROR -&gt;]#acc="ngbAccordion" activeIds="ngb-panel-0"&gt;
        &lt;ngb-panel title="Simple"&gt;
          &lt;ng-template "): ng:///SurveysModule/SurveysComponent.html@4:19
  'ngb-panel' is not a known element:
  1. If 'ngb-panel' is an Angular component, 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 component to suppress this message. ("
  
      &lt;ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0"&gt;
        [ERROR -&gt;]&lt;ngb-panel title="Simple"&gt;
          &lt;ng-template ngbPanelContent&gt;
      &lt;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 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. ("
      &lt;p *ngIf="spinner" class="text-center margin-100"&gt;Loading...&lt;/p&gt;
  </code></pre>
  
  <p>based on this code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;section&gt;
      &lt;p *ngIf="spinner" class="text-center margin-100"&gt;Loading...&lt;/p&gt;
  
      &lt;ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0"&gt;
        &lt;ngb-panel title="Simple"&gt;
          &lt;ng-template ngbPanelContent&gt;
      &lt;table class="table table-bordered" *ngIf="surveyFormData.length"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
              &lt;th scope="col"&gt;Form Type&lt;/th&gt;
              &lt;th scope="col" class="width-110"&gt;Registry Type&lt;/th&gt;
              &lt;th scope="col" class="width-70"&gt;Version&lt;/th&gt;
              &lt;th scope="col" class="width-150"&gt;Published Status&lt;/th&gt;
              &lt;th scope="col" class="width-100"&gt;Active Status&lt;/th&gt;
              &lt;th scope="col" class="width-260 text-center"&gt;Actions&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr *ngFor="let form of surveyFormData"&gt;
              &lt;th scope="row"&gt;{{ form.FormType }}&lt;/th&gt;
              &lt;th scope="row"&gt;{{form.RegistryID | registryType}}&lt;/th&gt;
              &lt;th scope="row"&gt;{{form.Version }}&lt;/th&gt;
              &lt;th scope="row"&gt;{{form.IsPublished ? 'Published' : 'Unpublished'}}&lt;/th&gt;
              &lt;th scope="row"&gt;{{form.IsActive ? 'Active' : 'Inactive'}}&lt;/th&gt;
              &lt;td class="text-nowrap"&gt;
                  &lt;a href="javascript:;" (click)="exportSpecs(form)" title="Export Specs" class="record-action"&gt;
                      &lt;i class="material-icons"&gt;input&lt;/i&gt;
                      &lt;span&gt;Export Specs&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;a href="javascript:;" (click)="publishForm(form)" title="Publish" class="record-action" [class.disabled]="form.IsPublished"&gt;
                      &lt;i class="material-icons"&gt;publish&lt;/i&gt;
                      &lt;span&gt;Publish&lt;/span&gt;
                  &lt;/a&gt;
  
                  &lt;a href="javascript:;" (click)="confirmFormActivation(form)" title="Activate" class="record-action" [class.disabled]="form.IsActive"&gt;
                      &lt;i class="material-icons"&gt;toggle_on&lt;/i&gt;
                      &lt;span&gt;Activate&lt;/span&gt;
                  &lt;/a&gt;
  
                  &lt;a routerLink="/records/playground/{{form.FormType}}/{{form.Version}}" title="View form in Playground"
                     class="record-action"&gt;
                      &lt;i class="material-icons"&gt;visibility&lt;/i&gt;
                      &lt;span&gt;View&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;a routerLink="/survey-builder/{{form.FormType}}/{{form.RegistryID}}/{{form.Version}}"
                     title="Edit Survey" class="record-action"&gt;
                      &lt;i class="material-icons"&gt;create&lt;/i&gt;
                      &lt;span&gt;Edit&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/ng-template&gt;
  &lt;/ngb-panel&gt;
  &lt;/ngb-accordion&gt;
  
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I thought I was following <a href="https://ng-bootstrap.github.io/#/components/accordion/examples" rel="nofollow noreferrer">https://ng-bootstrap.github.io/#/components/accordion/examples</a> correctly. </p>
  
  <p>Seems to be installed and included in imports correctly</p>
  
  <pre><code>import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  
  
  @NgModule({
  
      declarations: [
          AppComponent
      ],
      imports: [
          NgbModule,
  </code></pre>