title: Angular 6 service undefined after constructor initialization
body: <p>I have a service (ClientProfileService) injected into my component via the constructor, like so:</p>
  
  <pre><code>import { ClientProfileService } from '@app/services/client-profile/client-profile.service';
  
  @Component({
    selector: 'app-add-transaction',
    templateUrl: './add-transaction.component.html',
    styleUrls: ['./add-transaction.component.scss']
  })
  export class AddTransactionComponent implements OnInit, AfterViewInit {
  
  ... 
  ...
  
  constructor(
     private clientProfileService: ClientProfileService
  ) { }
  
  ...
  ...
  
  public autoCompleteDisplay(clientId?: string): string | undefined {
      if (clientId &amp;&amp; clientId.trim() !== '') {
  
        // next line produces the error
        let profile: IDetailedClientProfile = this.clientProfileService.findClientProfile(clientId);
  
        if (profile) {
          return profile.ClientName;
        }
      }
      return undefined;
    }
  }
  </code></pre>
  
  <p>I'm using an Angular Material Autocomplete component in my template using the [displayWith] attribute as explained <a href="https://material.angular.io/components/autocomplete/overview#setting-separate-control-and-display-values" rel="nofollow noreferrer" title="here">in the Angular Material documentation</a>.  Whenever I select a value in the dropdown box, the selected value (clientId) is passed to the 'autoCompleteDisplay' function.  That part is working fine and 'autoCompleteDisplay' is being called when I want it to.</p>
  
  <p>ClientProfileService is defined like so:</p>
  
  <pre><code>@Injectable({
    providedIn:'root'
  })
  export class ClientProfileService {
    private teamClientListSubject: BehaviorSubject&lt;IDetailedClientProfile[]&gt; = new BehaviorSubject(null);
  
    constructor(
        private http: HttpClient
    ) { }
  
    public findClientProfile(clientId: string): IDetailedClientProfile {
      let profile: IDetailedClientProfile = this.teamClientListSubject.value.filter(x =&gt; x.ClientId === clientId)[0];
      return profile;
    }
  }
  </code></pre>
  
  <p>I have referenced the BehaviorSubject in the service in multiple components and even other functions that return observables with no problems, which I left out in this case to keep the post more readable.</p>
  
  <p>When the 'autoCompleteDisplay' function is called, I receive an error:</p>
  
  <pre><code>ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'findClientProfile' of undefined
  </code></pre>
  
  <p>So ClientProfileService is undefined in the component at this particular point, but why?  I've initialized this service in several other areas in the app using this exact same method with no issues.</p>