ng-bootstrap in exported module

Question

So I have a nav-bar module that used 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 { }

It is placed in another directory (project), so the structure is:

• Main directory
  • App1 (here is placed nav-bar module)
  • App2 (here I want to import it)

Here is App2 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 {
}

@front-core is a path from tsconfig.app.json Here it is:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": ".",
    "module": "es2015",
    "types": [],
    "paths": {
      "@front-core/*": ["../../front-core/*"]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

So the problem is that when I include this component into template of App2, the error is occurred:

   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)

Answer 1

Any sub modules that use ngbmodule should include it like so:

imports: [NgbModule]

Your MAIN app module needs to hav eit declared like this:

imports: [NgbModule.forRoot()]

You should not have it as an export in your navbar module. Apart from that export, it seems like you imported it correctly based on what I said above. I would try removing that export.