Question

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

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

现在我想使用依赖ngx-intl-input的{{1}}模块。我想在登录组件中包含ngx-bootstrap。

因此，如果我在intl-input ...

中导入ngx-bootsrap

auth.module.ts

auth.module

我收到以下错误：

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>中，即便如此，我也遇到了同样的错误。知道怎么解决吗？如果需要，我可以分享更多细节。

Answer 1

导入AppModule时使用BsDropdownModule.forRoot。在其他任何地方导入时只使用BsDropdownModule。

<强>为什么吗

静态forRoot（）旨在向根注入器注册。这是为了确保其提供者在应用程序范围内共享。

从源代码中可以看出，forRoot方法返回一个带提供者的模块。

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

如果只导入＆＃39; BsDropdownModule＆＃39;，则它没有提供者。在您要导入模块的任何其他位置（如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 { }

Answer 2

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

我得到的错误： NullInjectorError：BsDropdownDirective没有提供程序！

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

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

Answer 3

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

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

3 个答案: