Cannot get ng-bootstrap component to work outside app.component - bootstrap-5

Question

I'm facing an issue when working with ng-bootstrap widgets in my angular app.
I'm using angular 15 and ng-bootstrap 14 as shown below:
#angular-devkit/architect 0.1501.6
#angular-devkit/build-angular 15.1.6
#angular-devkit/core 15.1.6
#angular-devkit/schematics 15.1.6
#angular/cli 15.1.6
#schematics/angular 15.1.6
rxjs 7.8.0
typescript 4.9.5
dependencies on package.json:
"#angular/animations": "^15.1.0",
"#angular/common": "^15.1.0",
"#angular/compiler": "^15.1.0",
"#angular/core": "^15.1.0",
"#angular/forms": "^15.1.0",
"#angular/platform-browser": "^15.1.0",
"#angular/platform-browser-dynamic": "^15.1.0",
"#angular/router": "^15.1.0",
"#ng-bootstrap/ng-bootstrap": "^14.0.1",
"#popperjs/core": "^2.11.6",
"bootstrap": "^5.2.3",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0"
The problem I have is that I'm importing NgbModule on my app.module.ts as suggested on ng-bootstrap getting started section (https://ng-bootstrap.github.io/#/getting-started) but the widgets such as ngb-accordion only seem to work within my app.component.html and I cannot get it to work on any other component. The code I tried so far is as follows:
app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule
],
providers: [],
bootstrap: [AppComponent],
exports:[NgbModule]
})
export class AppModule { }
And the error it gives when compiling is:
Error: src/components/bootstrap-components/accordion/accordion.component.html:38: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.
I tried putting the accordion in my app.component html and it works nicely but on any other component it does not.
What I also tried and did work is mark the AccordionComponent (of my project) as standalone and adding NgbModule in its imports array, but I don't think having to make all my components standalone for it to work is a good solution.
I did not post the entire code of the component to make this post more readable, but the full code of the project can be downloaded here: https://gitlab.com/arendevel/bootstrap-pwrd-angular
Any ideas? I'm new to angular + bootstrap development and I have researched stackoverflow [ng-bootstrap] tag a lot in hopes of finding a solution but I can't seem to be able to find it.