La propiedad 'firebase' no existe en el tipo {producción: booleano; }

Así que estaba tratando de construir e implementar mi aplicación Angular 4 para producción tanto en Firebase como en Heroku, pero me encontré con el siguiente error:

ERROR en / Users / ... / ... (57,49): La propiedad 'firebase' no existe en el tipo '{production: boolean; } '.

Ocurre cuando ejecuto ng build --prody mis servidores de implementación funcionan perfectamente bien. Aquí está mi archivo app.module.ts , como referencia:

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: '...',
  },
};

Después de revisar StackOverflow y GitHub en busca de posibles soluciones, parece que no hay desarrolladores que hayan encontrado este error exacto y hayan publicado sus hallazgos, por lo que me preguntaba si alguien sabe cómo resolver este problema. Muchas gracias de antemano!

Cuando ejecute ng build --prodangular-cli usará el environment.prod.tsarchivo y la variable de sus environment.prod.tsarchivos environmentno tiene el firebasecampo, por lo tanto, obtendrá la excepción.

Agregue el campo a 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: '...',
  },
};

Mi enfoque es fusionar el objeto de entorno común con prod one. Aquí está mi environment.prod.ts :

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

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

Por lo tanto, el objeto de entorno común actúa como un valor predeterminado reemplazable para todos los demás entornos.

Odio los duplicados en el código,
así que creemos un archivo separado environments/firebase.tscon el nombre del contenido

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

el uso

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

todo esta claro como para mi

Recibí el mismo error porque había escrito mal 'firebase' como 'firebas'

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

Asegúrese de que no haya espacio entre firebasey: .

Es decir, debería ser firebase:, no firebase :.