How to inject ngx bootstrap modules into child module - Angular 4

Question

My application folder structure is like below:

>app
  app.module.ts
  app.routing.ts
>>auth
  login.component
  auth.module.ts
  atuh.routing.module.ts

Now I would like to use the ngx-intl-input module which has dependency on ngx-bootstrap. I would like to include intl-input in the login component.

So if I import ngx-bootsrap in auth.module...

auth.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import { AuthRoutingModule } from './auth-routing.module';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { NgxIntlTelInputModule } from 'ngx-intl-tel-input';
@NgModule({
  imports: [
    CommonModule,
    AuthRoutingModule,
    BsDropdownModule.forRoot(),
    NgxIntlTelInputModule
  ],
  declarations: [LoginComponent]
})
export class AuthModule { }

I get the following error:

ERROR Error: Uncaught (in promise): Error: 
StaticInjectorError[ComponentLoaderFactory]: 
  StaticInjectorError[ComponentLoaderFactory]: 
    NullInjectorError: No provider for ComponentLoaderFactory!
Error: StaticInjectorError[ComponentLoaderFactory]: 
  StaticInjectorError[ComponentLoaderFactory]: 
    NullInjectorError: No provider for ComponentLoaderFactory!
    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)
    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)
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:795)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4744)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at <anonymous>

I tried to include them in the app.module.ts, and even then I am also getting the same error. Any idea how to solve it? I can share more details if needed.

Answer 1

I was getting the following error in my Angular application based on CoreUI:

NullInjectorError: StaticInjectorError(AppModule)[BsDropdownToggleDirective -> BsDropdownDirective]

It turned out my issue was that I had a directive misplaced in my template.

I had dropdownToggle in a button with no parent dropdown directive.

Fixed by switching my button from this:

<button class="btn btn-primary" type="button" dropdownToggle>
  Search
</button>

. . . to this:

<button class="btn btn-primary" type="button">
  Search
</button>