javascript - ERROR in : No provider for NgControl Angular AOT

Question

I am trying to implement a custom ControlValueAccessor as Kara Erickson recommended on last Angular Connect https://youtu.be/CD_t3m2WMM8?t=20m22s . To pass the validity state from the parent component to the child one.

app.component.html:

<app-country-select ngModel="model" name="country-select"></app-country-select>

country-select.component.html:

<select [formControl]="controlDir.control" #select placeholder="Country" i18n-placeholder (click)="onTouched()"
        (change)="onChange($event.value)" [required]="required">
  <option value="at">Austria</option>
  <option value="au">Australia</option>
</select>

country-select.component.ts:

@Component({
    selector: 'app-country-select',
    templateUrl: './country-select.component.html',
    styleUrls: ['./country-select.component.scss'],
})
export class CountrySelectComponent implements ControlValueAccessor {

    @Input() required = false;

    @ViewChild('select') select: HTMLSelectElement;

    onChange: (value: any) => void;
    onTouched: () => void;

    constructor(@Self() public controlDir: NgControl) {
      controlDir.valueAccessor = this;

    }
...
}

The full code lives here: https://github.com/maksymzav/ngcontrol .

The code works perfectly when running it in the JIT mode. I guess because in runtime it does know with which control it is used: NgModel, or FormControlName, or FormControlDirective. But when I run an AOT build with ng build --prod it fails with message

ERROR in : No provider for NgControl ("[ERROR ->]<app-country-select></app-country-select>")

Does anyone know how to make this build successful? Thank you.

Answer 1

You can add @Optional() decorator to your controlDir.

A parameter metadata that marks a dependency as optional. Injector provides null if the dependency is not found.

In my case, that solved the "No provider" error and I was able to successfully compile the project.

Example:

constructor(
  @Optional() // Add this decorator
  @Self()
  public controlDir: NgControl,
  private stripe: StripeService,
  private cd: ChangeDetectorRef
) {
  // Better to add some checks here since controlDir can be null
  if (controlDir) {
    controlDir.valueAccessor = this;
  }
}