Die Eigenschaft 'firebase' existiert nicht für Typ {Produktion: Boolean; }}

Ich habe versucht, meine Angular 4-App für die Produktion auf Firebase und Heroku zu erstellen und bereitzustellen, bin jedoch auf folgenden Fehler gestoßen:

FEHLER in / Users / ... / ... (57,49): Die Eigenschaft 'firebase' ist für den Typ '{product: boolean; } '.

Es tritt auf, wenn ich ausgeführt werde ng build --prodund meine Bereitstellungsserver einwandfrei funktionieren. Hier ist meine Datei app.module.ts als Referenz:

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

Umwelt.ts

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

Nachdem ich StackOverflow und GitHub nach möglichen Lösungen durchsucht habe, scheint es keine Entwickler zu geben, die genau auf diesen Fehler gestoßen sind und ihre Ergebnisse veröffentlicht haben. Daher habe ich mich gefragt, ob jemand weiß, wie man dieses Problem löst. Vielen Dank im Voraus!

Wenn Sie ng build --prodangle-cli ausführen, wird die environment.prod.tsDatei verwendet und Ihre environment.prod.tsDateivariable environmenthat das firebaseFeld nicht, daher wird die Ausnahme angezeigt.

Fügen Sie das Feld hinzu 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: "..."
  }
};

Mein Ansatz ist es, ein gemeinsames Umgebungsobjekt mit einem Produkt zusammenzuführen. Hier ist meine environment.prod.ts :

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

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

Das allgemeine Umgebungsobjekt fungiert daher als überschreibbarer Standard für alle anderen Umgebungen.

Ich hasse Duplikate im Code,
also erstellen wir eine separate Datei mit dem Namen environments/firebase.tsInhalt

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

die Verwendung

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

Alles ist klar für mich

Ich habe den gleichen Fehler erhalten, weil ich 'firebase' als 'firebas' falsch geschrieben hatte.

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

Stellen Sie sicher, dass zwischen firebaseund keine Lücke besteht :.

Das heißt, es sollte firebase:nicht sein firebase :.