Using of Accordion throws NullInjector error

[gaweCodes]

I want to use the Accordion component for Angular. However, I always receive a NullInjector error in the browser console. I have followed the instructions at: https://coreui.io/angular/docs/components/accordion (copied). What should I provide to help you assist me? I'm using the latest version and Angular 16. I had the same problem with Angular 14 in the past, but I managed to work around it by using a different framework. However, that framework is now obsolete.

[xidedix]

@gaweCodes any details about the error? NullInjectorError: No provider for... (what)?

[gaweCodes]

I am not sure if this is really relevant. I have no idea what is missing.

ERROR Error: NullInjectorError: No provider for r!
    at new Q (main.js:23:1976)
    at Jp.get (main.js:23:91590)
    at Rh.get (main.js:23:94541)
    at Rh.get (main.js:23:94541)
    at pb.get (main.js:23:114715)
    at su (main.js:23:74154)
    at el (main.js:23:74648)
    at Object.Dc (main.js:23:100425)
    at f.ɵfac [as factory] (main.js:23:340219)
    at Xi (main.js:23:76344)
   ...

This is my template code:

<c-accordion>
  <c-accordion-item #item0="cAccordionItem" [visible]="false">
    <ng-template cTemplateId="accordionHeaderTemplate">
      <button (click)="item0.toggleItem()" [collapsed]="!item0.visible" cAccordionButton>
        Accordion item #0
      </button>
    </ng-template>
    <ng-template cTemplateId="accordionBodyTemplate">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse
        plugin adds the appropriate classes that we use to style each element. These classes control the overall
        appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
        custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
        within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </ng-template>
  </c-accordion-item>
  <c-accordion-item #item1="cAccordionItem" [visible]="false">
    <ng-template cTemplateId="accordionHeaderTemplate">
      <button (click)="item1.toggleItem()" [collapsed]="!item1.visible" cAccordionButton>
        Accordion item #1
      </button>
    </ng-template>
    <ng-template cTemplateId="accordionBodyTemplate">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse
        plugin adds the appropriate classes that we use to style each element. These classes control the overall
        appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
        custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
        within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </ng-template>
  </c-accordion-item>
  <c-accordion-item #item2="cAccordionItem" [visible]="false">
    <ng-template cTemplateId="accordionHeaderTemplate">
      <button (click)="item2.toggleItem()" [collapsed]="!item2.visible" cAccordionButton>
        Accordion item #2
      </button>
    </ng-template>
    <ng-template cTemplateId="accordionBodyTemplate">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse
        plugin adds the appropriate classes that we use to style each element. These classes control the overall
        appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
        custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
        within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </ng-template>
  </c-accordion-item>
</c-accordion>

This imports are in the module that holds the component:

import {
  AccordionModule,
  ButtonModule,
  DropdownModule,
  GridModule,
  HeaderModule,
  SharedModule,
  SidebarModule,
} from '@coreui/angular';

@xidedix What do you think? Do you need more info?

[xidedix]

@gaweCodes so we have to find out what the heck is r ... 😅

I bet you need to import BrowserAnimationsModule or provideAnimations

on ng modules:

in your app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...

@NgModule({
  imports: [
    BrowserAnimationsModule,
...

or

on standalone components

in your main.ts

import { provideAnimations } from '@angular/platform-browser/animations';
...
bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations()
    ...
  ],
}).catch((err) => console.error(err));

see the demo for the latter: https://stackblitz.com/edit/stackblitz-coreui-accordion-7qsnt3-4237d6?file=src%2Fmain.ts

[gaweCodes]

You are the best! Did I miss something in the documentation or why couldn't I find anything there? I think it would be nice to mention this finding in the documentation.

[xidedix]

Great suggestion @gaweCodes. We'll make sure to add these details to the docs.

[xidedix]

docs updated