title: Property 'name' does not exist on type 'AppComponent'
body: <p>Below is my form. Works fine during <code>ng serve -o</code>. No issues raised. No errors raised.</p>
  
  <pre><code>&lt;form #f="ngForm" (ngSubmit)="onSubmit(f.value)"&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="customerName"&gt;Your Mobile Money Account Name&lt;/label&gt;
          &lt;input type="text" class="form-control" id="customerName" aria-describedby="emailHelp" placeholder="e.g Pantang Francias"
              name="name" [(ngModel)]="name"&gt;
          &lt;small id="emailHelp" class="form-text text-muted"&gt;This can be name used in registering the Mobile Money&lt;/small&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="network"&gt;Mobile Money Network&lt;/label&gt;
          &lt;select class="form-control" name="network" id="network" aria-describeby="networkHelp" [(ngModel)]="network" required&gt;
                    &lt;option value="airtel-gh"&gt;Airtel Mobile Money&lt;/option&gt;
                    &lt;option value="tigo-gh"&gt;Tigo Cash&lt;/option&gt;
                    &lt;option value="mtn-gh"&gt;MTN Mobile Money&lt;/option&gt;
                  &lt;/select&gt;
          &lt;small id="networkHelp" class="form-text text-muted"&gt;We currently support only Airtel Mobile Money&lt;/small&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="number"&gt;Your Mobile Number&lt;/label&gt;
          &lt;input type="number" name="phone_number" class="form-control" id="phone_number" placeholder="e.g 0269201707" aria-describeby="phone_numberHelp"
              [(ngModel)]="phone_number" required maxlength="10"&gt;
          &lt;small id="phone_numberHelp"&gt;The Mobile Money number payment will come from. It should belong to you.&lt;/small&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="internet_package"&gt;Internet Package&lt;/label&gt;
          &lt;select class="form-control" name="internet_package" id="internet_package" aria-describeby="packageHelp" [(ngModel)]="internet_package"
              required&gt;
                    &lt;option value="1gig"&gt;1 Gig - 30 Days - 5 Cedis&lt;/option&gt;
                    &lt;option value="3gig"&gt;3 Gig - 30 Days - 10 Cedis&lt;/option&gt;
                    &lt;option value="10gig"&gt;10 Gig - 30 Days - 30 Cedis&lt;/option&gt;
                  &lt;/select&gt;
          &lt;small id="packageHelp" class="form-text text-muted"&gt;Choose your package&lt;/small&gt;
      &lt;/div&gt;
      &lt;a class="btn btn-primary text-white" role="button" data-toggle="modal" data-target="#reviewPurchase"&gt;Review Purchase&lt;/a&gt;
      &lt;!-- Review Purchase Modal --&gt;
      &lt;div class="modal fade" id="reviewPurchase" tabindex="-1" role="dialog" aria-labelledby="reviewPurchase" aria-hidden="true"&gt;
          &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;h5 class="modal-title" id="reviewPurchase"&gt;Review your Purchase&lt;/h5&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;ul class="list-group"&gt;
                          &lt;li class="list-group-item"&gt;Name: &lt;strong&gt;{{ f.value.name}}&lt;/strong&gt;&lt;/li&gt;
                          &lt;li class="list-group-item"&gt;Mobile Money Network: &lt;strong&gt;{{ f.value.network }}&lt;/strong&gt;&lt;/li&gt;
                          &lt;li class="list-group-item"&gt;Your Number: &lt;strong&gt;0{{ f.value.phone_number }}&lt;/strong&gt;&lt;/li&gt;
                          &lt;li class="list-group-item"&gt;Internet Package: &lt;strong&gt;{{ f.value.internet_package }}&lt;/strong&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;hr&gt;
                      &lt;p class="lead text-center text-danger" *ngIf="!f.valid"&gt;
                          You have not fully completed the form. Go back and fill all the fields.
                      &lt;/p&gt;
                      &lt;p class="lead text-center" *ngIf="f.valid"&gt;
                          Proceed below if details above is correct.
                      &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;button type="submit" [disabled]="!f.valid" role="button" class="btn btn-primary"&gt;Make Payment&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>However..</p>
  
  <p>Immediately I do <code>ng build --prod</code>, I get this error:</p>
  
  <p>Exactly what kinda error is it complaining about? Why is it complaining now, but not when I run the <code>ng serve</code>?</p>
  
  <blockquote>
    <p>ERROR in
    ng:///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html
    (18,151): Property 'name' does not exist on type 'AppComponent'.
    ERROR in ng:///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html
    (23,104): Property 'network' does not exist on type 'AppComponent'.
        ERROR in ng:///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html
    (32,161): Property 'phone_number' does not exist on type
    'AppComponent'.
        ERROR in ng:///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html
    (37,122): Property 'internet_package' does not exist on type
    'AppComponent'.
        ERROR in ng:///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html
    (18,139): Property 'name' does not exist on type 'AppComponent'.
        ERROR in ng:///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html
    (23,46): Property 'network' does not exist on type 'AppComponent'.
        ERROR in ng:///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html
    (32,38): Property 'phone_number' does not exist on type
    'AppComponent'.
        ERROR in ng:///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html
    (37,46): Property 'internet_package' does not exist on type
    'AppComponent'.</p>
  </blockquote>
  
  <p><strong>Edit</strong></p>
  
  <p>This is my <code>AppComponent</code>:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NgForm } from '@angular/forms';
  import { PurchaseService } from './purchase.service';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  
    busy: boolean;
  
    constructor(public purchase: PurchaseService) {}
  
    onSubmit(data) {
      console.log(data);
    };
  }
  </code></pre>