web-dev-qa-db-ja.com

ngx bootstrapモジュールを子モジュールに挿入する方法-Angular 4

私のアプリケーションフォルダ構造は次のとおりです。

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

ここで、ngx-intl-inputに依存するngx-bootstrapモジュールを使用したいと思います。ログインコンポーネントにintl-inputを含めたいと思います。

したがって、ngx-bootsrapを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 { }

次のエラーが発生します。

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に含めようとしましたが、それでも同じエラーが発生します。それを解決する方法はありますか？必要に応じて詳細を共有できます。

angularng-bootstrapangular5
6
Sri Kanth

CoreUIに基づくAngularアプリケーションで次のエラーが発生しました：

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

私の問題は、テンプレートにディレクティブが間違って配置されていることでした。

親のdropdownToggleディレクティブのないボタンにdropdownがありました。

これからボタンを切り替えることで修正されました：

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

。 。 。これに：

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

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