Property 'firebase' does not exist on type { production: boolean; }

Question

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:

ERROR in /Users/.../... (57,49): Property 'firebase' does not exist on type '{ production: boolean; }'.

It occurs when I run ng build --prod, and my deployment servers are working perfectly fine. Here is my app.module.ts file, for reference:

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 {}

environment.prod.ts

export const environment = {
  production: true
};

environment.ts

export const environment = {
  production: true,
  firebase: {
    apiKey: '...',
    authDomain: 'project.firebaseapp.com',
    databaseURL: 'https://project.firebaseio.com',
    projectId: 'project',
    storageBucket: 'project.appspot.com',
    messagingSenderId: '...',
  },
};

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!

Answer 1

When you run ng build --prod angular-cli will use the environment.prod.ts file and your environment.prod.ts files environment variable doesn't have the firebase field hence you are getting the exception.

Add the field to environment.prod.ts

export const environment = {
  production: true,
  firebase: {
    apiKey: '...',
    authDomain: 'project.firebaseapp.com',
    databaseURL: 'https://project.firebaseio.com',
    projectId: 'project',
    storageBucket: 'project.appspot.com',
    messagingSenderId: '...',
  },
};

Answer 2

My approach is to merge common environment object with prod one. Here's my environment.prod.ts:

import { environment as common } from './environment';

export const environment = {
  ...common,
  production: true
};

So common environment object acts as an overridable default for all other environments.

Answer 3

I hate duplicates in code
so let's create a separate file named environments/firebase.ts with content

export const firebase = {
    //...
};

the usage

import {firebase} from '../environments/firebase';
//...
AngularFireModule.initializeApp(firebase)

all is clear as for me

Answer 4

I got the same error because I had misspelled 'firebase' as 'firebas'

firebas: { apiKey: "...", authDomain: "project.firebaseapp.com", databaseURL: "https://project.firebaseio.com", projectId: "project", storageBucket: "project.appspot.com", messagingSenderId: "..." }

Answer 5

Make sure there is no gap between firebase and :.

That is, it should be firebase:, not firebase :.