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

问题

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!

回答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: "..."
  }
};

回答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.

回答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

回答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: "..." }