Angular interpolation causing AOT compile error

Question

I am trying to compile my application, but AOT is throwing the following error due to Angular interpolation in an Angular 2 Form:

Property 'address' does not exist on type 'FirebaseObjectObservable'.

Here's a relevant snippet from my form HTML:

        <div class="col-md-6">
      <div class="form-group row clearfix" [ngClass]="{'has-error': (!address2.valid && address2.dirty), 'has-success': (address2.valid || address2.pristine)}">
        <label for="inputAddress2" class="col-sm-3 control-label">Address 2</label>
        <div class="col-sm-9">
          <input [formControl]="address2" value="{{building?.address?.address2}}" type="text" class="form-control" id="inputAddress2" placeholder="Address 2">
        </div>
      </div>
    </div>

And here is the relevant snippet from my component:

  public buildings: FirebaseObjectObservable<any>;
  ....
    this.buildings = this.af.database.object(this.fbs.bLocation + 
      this.buildingId + '/');
      this.buildings.subscribe((items) => {
        this.building = (items);
      });

Now I'm not sure how I am supposed to do this differently, since this works just fine prior to compilation using Webpack and in JIT compilation, but once I go to build it for production using AOT, it throws this error. The reason I'm trying to use interpolation on the form, is because I am trying to pull the user's settings from the database, and allow them to be updated.

Answer 1

This error is from the type building not being declared in my component.

Fixed the issue by importing my building dataType, and declaring it in the code like so:

building: Building = {
  $key: null,
  details: {
    name: null,
  },
  address: {
    address1: null, address2: null, city: null, state: null, zipcode: null, country: null,
  },
  contact: {
    name: null, email: null, phone: null,
  },
};

Thanks to @JB Nizet for reminding me that I forgot to declare it.