如何将ngx引导程序模块注入子模块-Angular 4

Question

我的应用程序文件夹结构如下：

>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，即使这样，我也遇到了同样的错误。知道如何解决吗？如果需要，我可以分享更多详细信息。

Answer 1

我在基于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>

Answer 2

这里没有一个解决方案对我有用。

我得到的错误：NullInjectorError: No provider for BsDropdownDirective！

我偶然尝试了这个，它为我修复了它。将此添加到 app.module.ts 中的提供程序：

...提供者：[BsDropdownConfig]，引导程序：[AppComponent] ...

Answer 3

导入到 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 { }