Experts to the rescue: Can't resolve all parameters for Component Error

Question

I have put together a custom autocomplete form field component in stackblitz based on the custom form field tutorial provided by Angular Material. Here it is:

https://stackblitz.com/edit/my-custom-autocomplete

When I serve this project from my local machine, I get the following error:

Error: Can't resolve all parameters for AutoCompleteControlComponent: ([object Object], [object Object], ?, [object Object]).

Basically, every service injected in the constructor fails. Here is the constructor

constructor(
        private focusMonitor: FocusMonitor,
        private elementRef: ElementRef<HTMLElement>,
        @Optional() @Self() public ngControl: NgControl | null,
        private autofillMonitor: AutofillMonitor,
      ) {
        if (ngControl) {
            this.ngControl.valueAccessor = this;
            ngControl.valueAccessor = this;
        }
    }

This is my local configuration:

Angular CLI: 8.3.24
Node: 12.14.1
OS: linux x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.24
@angular-devkit/build-angular     0.803.24
@angular-devkit/build-optimizer   0.803.24
@angular-devkit/build-webpack     0.803.24
@angular-devkit/core              8.3.24
@angular-devkit/schematics        8.3.24
@angular/cdk                      8.2.3
@angular/cli                      8.3.24
@angular/material                 8.2.3
@ngtools/webpack                  8.3.24
@schematics/angular               8.3.24
@schematics/update                0.803.24
rxjs                              6.5.4
typescript                        3.5.3
webpack                           4.39.2

In another post I read that this error has to do with barrel files, so I removed all barrel files and now the control is now longer recognized as a mat-form-field with Error: "mat-form-field must contain a MatFormFieldControl.". Here is the modified blitz:

https://stackblitz.com/edit/my-custom-autocomplete-zmmovs

I am completely lost. Any help would be much appreciated!

Answer 1

Removing the OR operation solved the problem. I changed this:

@Optional() @Self() public ngControl: NgControl | null,

with this line

@Optional() @Self() public ngControl: NgControl,

Nevertheless, the question remains, why stackblitz and my local environment handle this operation differently..