使用 angular 库时，在 NodeInjector 中找不到 NgControl 的提供者

Question

我运行没主意了。我想在 angular 库的组件中的输入中使用 [(ngModel)]，因此我需要在库的模块中导入 FormsModule 才能使用它。我做的。我有一个演示项目，我在其中调用该库的一个组件来对其进行测试，但我在标题中得到了错误。有人知道怎么办吗？

我还尝试在演示 angular 项目中的组件中导入 FormsModule app.module 并且它有效。但是在库的组件中是不可能实现的。

错误：

core.js:6162 ERROR Error: NG0201: No provider for NgControl found in NodeInjector. Find more at https://angular.io/errors/NG0201
    at throwProviderNotFoundError (core.js:233)
    at notFoundValueOrThrow (core.js:3316)
    at lookupTokenUsingModuleInjector (core.js:3351)
    at getOrCreateInjectable (core.js:3453)
    at Module.ɵɵdirectiveInject (core.js:14634)
    at NodeInjectorFactory.NgControlStatus_Factory [as factory] (forms.js:1301)
    at getNodeInjectable (core.js:3548)
    at instantiateAllDirectives (core.js:10227)
    at createDirectivesInstances (core.js:9576)
    at Module.ɵɵelementStart (core.js:14778)

有人有什么想法吗？提前致谢。

库的 .module 文件：

import { NgModule } from '@angular/core';
import { SavingGoalComponent } from './saving-goal/saving-goal.component';
import { EarlyRetirementComponent } from './early-retirement/early-retirement.component';
import { SavingsDurationComponent } from './savings-duration/savings-duration.component';
import { MatSliderModule } from '@angular/material/slider';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [
    SavingGoalComponent,
    EarlyRetirementComponent,
    SavingsDurationComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    TranslateModule,
    MatSliderModule,
    MatSelectModule,
    MatFormFieldModule,
    FormsModule
  ],
  exports: [
    SavingGoalComponent,
    EarlyRetirementComponent,
    SavingsDurationComponent
  ],
})
export class CalculatorsLibraryModule { }

project.ts 文件:

/*
 * Public API Surface of calculators-library
 */

export * from './lib/calculators-library.module';

export { SavingGoalComponent } from './lib/saving-goal/saving-goal.component';
export { EarlyRetirementComponent } from './lib/early-retirement/early-retirement.component';
export { SavingsDurationComponent } from './lib/savings-duration/savings-duration.component';

演示 angular 项目的

app.module：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CalculatorsLibraryModule } from '../../../calculators-library/src/project';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (http: HttpClient) => {
          return new TranslateHttpLoader(
            http,
            '../../assets/i18n/'
          );
        },
        deps: [HttpClient]
      },
      defaultLanguage: 'es'
    }),
    AppRoutingModule,
    CalculatorsLibraryModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})`enter code here`
export class AppModule { }

演示项目的

app.component：

<div class="calculator">
    <lib-early-retirement></lib-early-retirement>
</div>

lib component.html:

<div class="module-column">
                <label for="erc-age">Tu edad actual es</label>
                <input id="erc-age" name="erc-age" type="text" [(ngModel)]="inputs.Age">
                <mat-slider [(ngModel)]="inputs.Age" [min]="0" [max]="100"></mat-slider>
            </div>

Answer 1

你有导出组件的库模块，但没有导出所需的模块，所以有两种选择：

在库模块中导出FormsModule
在 AppModule 中导入 FormsModule。

Answer 2

我发现了错误。我在另一个组件中命名了一个属性，其名称与 ReactiveForms 中的指令所使用的名称相同。似乎当我导入 FormsModule 时，错误出现了，而不是在此操作之前，所以我也需要导入 ReactiveForms 来解决这个问题。在我的例子中，我不需要 ReactiveForms，所以从另一个组件中删除属性并重命名它解决了问题，现在一切正常。

使用 angular 库时，在 NodeInjector 中找不到 NgControl 的提供者

No provider for NgControl found in NodeInjector when using angular library

angular

typescript

forms

import

angular-module