title: Property 'firebase' does not exist on type { production: boolean; }
body: <p>So I was trying to build and deploy my Angular 4 app for production on both Firebase and Heroku, but I have come across the error as follows:</p>
  <blockquote>
  <p>ERROR in /Users/.../... (57,49):  Property 'firebase' does not exist
  on type '{ production: boolean; }'.</p>
  </blockquote>
  <p>It occurs when I run <code>ng build --prod</code>, and my deployment servers are working perfectly fine. Here is my <strong>app.module.ts</strong> file, for reference:</p>
  <pre class="lang-js prettyprint-override"><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { AngularFireModule } from 'angularfire2';
  import { AngularFireDatabaseModule } from 'angularfire2/database';
  import { Ng2ScrollimateModule } from 'ng2-scrollimate';
  import { Ng2PageScrollModule } from 'ng2-page-scroll';
  
  import { HttpModule } from '@angular/http';
  import { trigger, state, style, animate, transition, keyframes } from '@angular/animations';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { environment } from '../environments/environment';
  
  import { AppComponent } from './app.component';
  
  import { LogoComponent } from './logo/logo.component';
  import { InfoComponent } from './info/info.component';
  import { AboutComponent } from './about/about.component';
  import { DividerComponent } from './divider/divider.component';
  import { ProficienciesComponent } from './proficiencies/proficiencies.component';
  import { ProficiencyComponent } from './proficiency/proficiency.component';
  import { PortfolioComponent } from './portfolio/portfolio.component';
  import { ProjectComponent } from './project/project.component';
  import { ResumeComponent } from './resume/resume.component';
  import { FooterComponent } from './footer/footer.component';
  import { ContactComponent } from './contact/contact.component';
  import { LoadingComponent } from './loading/loading.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      LogoComponent,
      InfoComponent,
      AboutComponent,
      DividerComponent,
      ProficienciesComponent,
      ProficiencyComponent,
      PortfolioComponent,
      ProjectComponent,
      ResumeComponent,
      FooterComponent,
      ContactComponent,
      LoadingComponent,
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      BrowserAnimationsModule,
      AngularFireModule.initializeApp(environment.firebase),
      AngularFireDatabaseModule,
      Ng2ScrollimateModule,
      Ng2PageScrollModule.forRoot(),
    ],
    providers: [],
    bootstrap: [AppComponent],
  })
  export class AppModule {}
  </code></pre>
  <p><strong>environment.prod.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>export const environment = {
    production: true
  };
  </code></pre>
  <p><strong>environment.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>export const environment = {
    production: true,
    firebase: {
      apiKey: '...',
      authDomain: 'project.firebaseapp.com',
      databaseURL: 'https://project.firebaseio.com',
      projectId: 'project',
      storageBucket: 'project.appspot.com',
      messagingSenderId: '...',
    },
  };
  </code></pre>
  <p>After scouring StackOverflow and GitHub for possible solutions, there seem to be no developers who have encountered this exact error and published their findings, so I was wondering whether anyone knows how to go about solving this issue. Thanks so much in advance!</p>