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)

Remove the `NgbModule.forRoot(),` import in `AppModule`. The `NgbModule` is now imported with `MainNavbarModule`. — gwest7, Oct 16 '20 at 13:06

score 0 · Answer 1 · answered Jan 23 '18 at 15:49

0

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.

answered Jan 23 '18 at 15:49

David Anthony Acosta

4,766
1
19
19

Hmmm...try this. Add a constructor to your module class and add this: import { NgbModule, NgbDropdownConfig} from "@ng-bootstrap/ng-bootstrap"; and in the constructor: export class YourModule{ constructor(dropdownConfig: NgbDropdownConfig) { dropdownConfig.placement = ["bottom-left", "top-left", "bottom-right", "top-right"]; } } – David Anthony Acosta Jan 24 '18 at 14:35

ng-bootstrap in exported module

1 Answers1