I'm facing an issue with my nav-bar module that utilizes ng-bootstrap:
import {NgModule, NgZone} from '@angular/core';
import { CommonModule } from '@angular/common';
import {NavigationComponent} from "./components/navigation/navigation.component";
import {NavMenuComponent} from "./components/nav-menu/nav-menu.component";
import {MainMenuComponent} from "./components/main-menu/main-menu.component";
import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
@NgModule({
imports: [
CommonModule,
NgbModule
],
declarations: [
NavigationComponent,
NavMenuComponent,
MainMenuComponent
],
exports: [
NavigationComponent,
NavMenuComponent,
MainMenuComponent,
CommonModule,
NgbModule
],
providers: [{ provide: NgZone, useFactory: () => new NgZone({}) }]
})
export class MainNavbarModule { }
The structure of the project includes the nav-bar module in one directory and another directory where it needs to be imported:
- Main directory
- App1 (where the nav-bar module is located)
- App2 (where I need to import it)
This is App2's module:
import {BrowserModule} from '@angular/platform-browser';
import {NgModule, NgZone} from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {MainNavbarModule} from '@front-core/src/app/shared/main-navbar.module';
import {AppComponent} from './app.component';
import {AppRoutes} from './app.routes';
import {CommonModule} from '@angular/common';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
NgbModule.forRoot(),
CommonModule,
AppRoutes,
MainNavbarModule
],
bootstrap: [AppComponent]
})
export class AppModule {
}
The path @front-core is specified in tsconfig.app.json like this:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": ".",
"module": "es2015",
"types": [],
"paths": {
"@front-core/*": ["../../front-core/*"]
}
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
However, when trying to include this component in the template of App2, an error occurs:
ERROR Error: StaticInjectorError[NgbDropdownConfig]:
StaticInjectorError[NgbDropdownConfig]:
NullInjectorError: No provider for NgbDropdownConfig!
at _NullInjector.get (core.js:993)
at resolveToken (core.js:1281)
at tryResolveToken (core.js:1223)
at StaticInjector.get (core.js:1094)
at resolveToken (core.js:1281)
at tryResolveToken (core.js:1223)
at StaticInjector.get (core.js:1094)
at resolveNgModuleDep (core.js:10878)
at NgModuleRef_.get (core.js:12110)
at resolveDep (core.js:12608)