どの子モジュールにNGXブートストラップモジュールを注入するために - 私のアプリケーションのフォルダ構造は以下のようなものですアンギュラ4

Question

：

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

今、私はngx-bootstrapに依存しているngx-intl-inputモジュールを使用したいと思います。ログインコンポーネントにintl-inputを追加したいと思います。私はauth.moduleでngx-bootsrap ...

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 { } 

をインポートする場合

は、だから私は、次のエラーを取得する：

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> 

私はそれらを含めることを試みましたapp.module.ts、さらには同じエラーが発生しています。どのようにそれを解決するための任意のアイデア？必要に応じて詳細を共有することができます。

Answer 1

AppModuleにインポートするときにBsDropdownModule.forRootを使用します。他の場所にインポートするときはBsDropdownModuleを使用してください。

なぜですか？

静的forRoot（）はルートインジェクタに登録されることを意図しています。これは、プロバイダがアプリケーション全体で共有されるようにするためです。

ソースコードからわかるように、forRootメソッドはプロバイダを含むモジュールを返します。

https://github.com/valor-software/ngx-bootstrap/blob/development/src/dropdown/bs-dropdown.module.ts

あなたは単に 'BsDropdownModule' をインポートする場合、それは何のプロバイダを持っていません。どこか他のあなたは（AuthModuleのような）モジュールをインポートすることを、あなただけのBsDropdownModuleをインポートする必要があります。

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, 
    NgxIntlTelInputModule 
    ], 
    declarations: [LoginComponent] 
}) 
export class AuthModule { }