Невозможно построить угловой проект - надлежащее не существует на компоненте

Question

У меня проблема, которую я вообще не понимаю. Я довольно новичок, так что это может быть что-то маленькое, но тем не менее.

Когда я пытаюсь построить свой проект, чтобы опубликовать его на странице github, компоненты HTML терпят неудачу при сборке, поскольку свойства компонента не существуют. Все ошибки связаны с тем, что компоненты HTML не находятся вне свойств объекта. (Которые в любом случае предоставляются через службу API!)

Я попытался предоставить минимально необходимый код для иллюстрации проблемы.

Дамп ошибки:

ERROR in src\app\users\users.component.html(4,20): : Property 'queryString' does not exist on type 'UsersComponent'.
src\app\users\users.component.html(9,7): : Property 'queryString' does not exist on type 'UsersComponent'.
src\app\users\users.component.html(4,20): : Property 'queryString' does not exist on type 'UsersComponent'.
src\app\details\details.component.html(1,5): : Property 'name' does not exist on type 'Object'.
src\app\details\details.component.html(4,32): : Property 'RunnerName' does not exist on type 'Object'.
src\app\details\details.component.html(5,29): : Property 'LastTime' does not exist on type 'Object'.
src\app\details\details.component.html(6,29): : Property 'LastDistance' does not exist on type 'Object'.
src\app\details\details.component.html(7,29): : Property 'date' does not exist on type 'Object'.

user.component.html

<h1>Runners</h1>

<div>
<input type="text" [(ngModel)]="queryString" placeholder = "Search Runner Name">
</div>

<ul>
  <li *ngFor = "let user of users | filterdata: queryString : 'RunnerName' ; let i = index">

    <a routerLink = "/details/{{ user.RunnerId }}">{{ user.RunnerName }}</a>

    <ul>
      <li><strong>Runner ID: {{ user.RunnerId }}</strong></li>
    </ul>

  </li>
</ul>

user.component.ts

import { Component, OnInit } from '@angular/core';
//Importing my users service, up one level in project structure from here.
import { DataService } from '../data.service';
//RXJS will hold the data which is returned from the API...
//RESEARCH RXJS
import { Observable } from 'rxjs';
import { FormsModule } from '@angular/forms';
import { Pipe, PipeTransform } from '@angular/core';


@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})

//Export class implenets OnInit.
export class UsersComponent implements OnInit {

  //Prop which holds returned API data
  //of type obect.
  users: Object;

  //Creating instance of the service via dependancy injection.
  constructor(private data: DataService) { }

  //NG on init is one of the "lifecycle hooks" for angular components.
  //Code in here will be executed when the component loads for ngOnInit.
  ngOnInit() {
    //Executing the method which is provided by the service.
    //Adding data bind via subscribe.
    this.data.getUsers().subscribe(
      //returning the user data via single line return function
      //passing the data value into the function.
      (data) => {
      //assinging the data to the user object.
      this.users = data
      //sorting the users object by runner ID.
      //this.users.sort((a,b) => a.RunnerId - b.RunnerId);
      }
    );
  }

}

data.service.ts

import { Injectable } from '@angular/core';
//Importing te angular HTTP Client
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

//Class which exports the service to the APP.
//We will import this class into the components when required.
export class DataService {

  //Utilising the HTTP client import Class
  //HTTP Client request expects JSON return data as default, their is no need to parse JSON anymore.
  constructor(private http: HttpClient) {}

  //Custom Method to return Users collection from the web API.
  getUsers(){
    //single line return statement.
    return this.http.get('http://rundistance.azurewebsites.net/api/RunnerService')
  }
  //Function to return the detail of a single user, passing in the ID prop of currently selected target of objects master layer.
  getUser(userId){
    //single line return statement getting target object from API.
    return this.http.get('http://rundistance.azurewebsites.net/api/RunnerService/'+userId)
  }
  //Returning posts from API.
  getPosts(){
    //single line return statement.
    return this.http.get('https://jsonplaceholder.typicode.com/posts')
  }
}

filterdata.pipe

import { Pipe, PipeTransform } from '@angular/core';
import { DataService } from './data.service';

@Pipe({
  name: 'filterdata'
})

export class FilterdataPipe implements PipeTransform {

  transform(items: any[], value: string, label:string): any[] {
    if (!items) return [];

    if (!value) return  items;

    if (value == '' || value == null) return [];
    return items.filter(e => e[label].toLowerCase().indexOf(value) > -1 );
  }

}