title: Angular Filter Issue - Property filter does not exist on type
body: <p>I have an Angular 7 App with Laravel as the Endpoint. In it I created a filter. When I serve on the Local System it works perfectly. The issue occur when I tried to run:</p>
  
  <blockquote>
    <p>ng build --prod</p>
  </blockquote>
  
  <p>It generates this error:</p>
  
  <blockquote>
    <p>src\app\components\bulk-sms-outbox.component.html(77,24): : Property 'filter' does not exist on type 'BulkSmsOutboxComponent'.</p>
  </blockquote>
  
  <p>service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable, of, throwError } from 'rxjs';
  import { HttpClient, HttpHeaders, HttpErrorResponse } from 
  '@angular/common/http';
  import { catchError, tap, map } from 'rxjs/operators';
  import { Smsmt } from '../models/smsmt';
  
  const httpOptions = {
    headers: new HttpHeaders({'Content-Type': 'application/json'})
  };
  const apiUrl = "http://localhost/backend/public/api/smsmts";
  
  @Injectable({
    providedIn: 'root'
  })
  
  export class SmsmtService {
    constructor(private http: HttpClient) { }
    getSmsmts (): Observable&lt;Smsmt[]&gt; {
  return this.http.get&lt;Smsmt[]&gt;(apiUrl)
    .pipe(
      tap(smsmts =&gt; console.log('Fetch smsmts')),
      catchError(this.handleError('getSmsmts', []))
    );
    }
  </code></pre>
  
  <p>model.ts</p>
  
  <pre><code>export class Smsmt {
  msisdn: string;
  message: string;
  telco: string;
  error_message: string;
  error_code: string;
  package_id: string;
   }
  </code></pre>
  
  <p>bulk-sms-outbox.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  import { SmsmtService } from '../../../services/smsmt.service';
  import { TokenService } from '../../../services/token.service';
  import { Router } from '@angular/router';
  import { Smsmt } from '../../../models/smsmt';
  
  @Component({
    selector: 'app-bulk-sms-outbox',
    templateUrl: './bulk-sms-outbox.component.html',
    styleUrls: ['./bulk-sms-outbox.component.scss']
  })
  
  export class BulkSmsOutboxComponent implements OnInit {
  
    displayedColumns: string[] = ['msisdn', 'message', 
  'telco','error_message','error_code', 'package_id'];
    data: Smsmt[] = [];
    isLoadingResults = true;    
  
    constructor(private api: SmsmtService) { }
  
    ngOnInit() {
      this.api.getSmsmts()
        .subscribe(res =&gt; {
      this.data = res;
      console.log(this.data);
      this.isLoadingResults = false;
        }, err =&gt; {
      console.log(err);
      this.isLoadingResults = false;
    });
  
    }
  
    ngOnDestroy(): void {
  document.body.className = '';
    }
  
    //sorting
    key: string = 'msisdn';
    reverse: boolean = false;
    sort(key){
     this.key = key;
  this.reverse = !this.reverse;
   }
   p: number = 1;    
  
  }
  </code></pre>
  
  <p>bulk-sms-outbox.component.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;app-navbartop&gt;&lt;/app-navbartop&gt;
    &lt;app-navbaraside&gt;&lt;/app-navbaraside&gt;
    &lt;div class="content-wrapper"&gt;
    &lt;!-- Content Header (Page header) --&gt;
    &lt;section class="content-header"&gt;
  
      &lt;ol class="breadcrumb"&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            &lt;i class="fa fa-dashboard"&gt;&lt;/i&gt; Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="active"&gt;Dashboard&lt;/li&gt;
      &lt;/ol&gt;
    &lt;/section&gt;
    
    &lt;!-- Main content --&gt;
    &lt;section class="content"&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-xs-12"&gt;
          &lt;h1&gt;SMS - Outbox&lt;/h1&gt;
          &lt;p&gt;This is a log of your bulk sms outbox.&lt;/p&gt;
  
  
          &lt;!-- /.box --&gt;
        &lt;/div&gt;
        &lt;!-- /.col --&gt;
      &lt;/div&gt;      
  
        &lt;div class="row"&gt;
            &lt;div class="col-xs-12"&gt;
              
              &lt;div class="col-lg-12 col-sm-12 col-xs-12 no-padding" style="padding-top: 20px !important;"&gt;
            
              &lt;div class="col-xs-4"&gt;
                  &lt;a href="#" class="btn btn-block btn-primary" style="margin-right: 15px;"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt; Filter Messages&lt;/a&gt;
                &lt;/div&gt;
              &lt;div class="col-xs-4"&gt;
                  &lt;a href="#" class="btn btn-block btn-primary" style="margin-right: 15px;"&gt;&lt;i class="fa fa-download"&gt;&lt;/i&gt; Download CSV&lt;/a&gt;
              &lt;/div&gt;    
              &lt;div class="col-xs-4"&gt;           
                    &lt;a href="#" class="btn btn-block btn-primary" style="margin-right: 15px;"&gt;&lt;i class="fa fa-refresh"&gt;&lt;/i&gt; Refresh&lt;/a&gt;
              &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;    
        &lt;/div&gt;
  &lt;br&gt;        
  
      &lt;div class="row"&gt;
        &lt;div class="col-xs-12"&gt;
          &lt;div class="box"&gt;
          &lt;!--
          &lt;div class="box-header"&gt;
            &lt;h3 class="box-title"&gt;&lt;/h3&gt;
          &lt;/div&gt;
          --&gt;
            &lt;!-- /.box-header --&gt;
            &lt;div class="box-body"&gt;
              &lt;table id="example2" class="table table-bordered table-hover table-striped table-condesed"&gt;
                &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th width="5%"&gt;#&lt;/th&gt;
                    &lt;th&gt;MSISDN&lt;/th&gt;
                    &lt;th&gt;Message&lt;/th&gt;
                    &lt;th&gt;Telco&lt;/th&gt;
                    &lt;th&gt;Error Message&lt;/th&gt;
                    &lt;th&gt;Error Code&lt;/th&gt;
                    &lt;th&gt;Package&lt;/th&gt;
                  &lt;!-- &lt;th&gt;Status&lt;/th&gt;                     --&gt;
                &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
  
                        &lt;tr  *ngFor="let datas of data| filter:filter | paginate: { itemsPerPage: 5, currentPage: p }; let i = index"&gt;
                        &lt;td&gt;{{i + 1}}&lt;/td&gt;
                      &lt;td&gt;{{datas.msisdn}}&lt;/td&gt;
                      &lt;td&gt;{{datas.message}}&lt;/td&gt;
                      &lt;td&gt;{{datas.telco}}&lt;/td&gt;
                      &lt;td&gt;{{datas.error_message}}&lt;/td&gt;
                      &lt;td&gt;{{datas.error_code}}&lt;/td&gt;
                      &lt;td&gt;{{datas.package_id}}&lt;/td&gt;
  
                &lt;/tr&gt;
              &lt;/table&gt;
              &lt;pagination-controls (pageChange)="p = $event"&gt;&lt;/pagination-controls&gt;
            &lt;/div&gt;
            &lt;!-- /.box-body --&gt;
          &lt;/div&gt;
          &lt;!-- /.box --&gt;
  
  
          &lt;!-- /.box --&gt;
        &lt;/div&gt;
        &lt;!-- /.col --&gt;
      &lt;/div&gt;    
  
    &lt;/section&gt;
  &lt;/div&gt; 
  
    &lt;app-navbarfooter&gt;&lt;/app-navbarfooter&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>