ERROR in : No provider for NgControl Angular AOT : <p>I am trying to implement a custom ControlValueAccessor as Kara Erickson recommended on last Angular Connect <a href="https://youtu.be/CD_t3m2WMM8?t=20m22s" rel="noreferrer">https://youtu.be/CD_t3m2WMM8?t=20m22s</a> . To pass the validity state from the parent component to the child one.</p>

<p>app.component.html:</p>

<pre><code>&lt;app-country-select ngModel="model" name="country-select"&gt;&lt;/app-country-select&gt;
</code></pre>

<p>country-select.component.html:</p>

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

<p>country-select.component.ts:</p>

<pre><code>@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) =&gt; void;
    onTouched: () =&gt; void;

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

    }
...
}
</code></pre>

<p>The full code lives here: <a href="https://github.com/maksymzav/ngcontrol" rel="noreferrer">https://github.com/maksymzav/ngcontrol</a> .</p>

<p>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 <code>ng build --prod</code> it fails with message </p>

<blockquote>
  <p>ERROR in : No provider for NgControl ("[ERROR ->]&lt;app-country-select>&lt;/app-country-select>")</p>
</blockquote>

<p>Does anyone know how to make this build successful? Thank you.</p>
