title: How to inject ngx bootstrap modules into child module - Angular 4
body: <p>My application folder structure is like below:</p>
  
  <pre><code>&gt;app
    app.module.ts
    app.routing.ts
  &gt;&gt;auth
    login.component
    auth.module.ts
    atuh.routing.module.ts
  </code></pre>
  
  <p>Now I would like to use the <code>ngx-intl-input</code> module which has dependency on <code>ngx-bootstrap</code>. I would like to include <code>intl-input</code> in the login component. </p>
  
  <p>So if I import <code>ngx-bootsrap</code> in <code>auth.module</code>...</p>
  
  <p>auth.module.ts</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>I get the following error:</p>
  
  <pre><code>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 &lt;anonymous&gt;
  </code></pre>
  
  <p>I tried to include them in the <code>app.module.ts</code>, and even then I am also getting the same error. Any idea how to solve it? I can share more details if needed.</p>