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

80

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!

Anthony Krivonos
quelle
Wie sieht Ihr environmentImport aus?
eko
@echonax Lassen Sie mich die Frage mit meinem Code für Sie aktualisieren.
Anthony Krivonos

Antworten:

192

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: "..."
  }
};
eko
quelle
11
Sie, Sir, sind ein Lebensretter. Ich musste lediglich meinen environment.tsCode in meine environment.prod.tsDatei replizieren . Dann rannte ich einfach: ng build --prodund firebase deploy.
Anthony Krivonos
1
@ AnthonyKrivonos froh, dass ich helfen konnte :-)
eko
Ich bin damit einverstanden, jetzt bekomme ich Firebase ist nicht Teil von .... während ich es in beiden
Umgebungen
Vielen Dank, Sie sind Lebensretter
Mohammed Z. Aljezawi
5

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.

Dhilt
quelle
Dieser Ansatz scheint mir gut , aber nicht sicher , warum Angular 7 cli zeigt Warnung ** Warnung in einer zirkulären Abhängigkeit erkannt: src \ Umgebungen \ environment.ts -> src \ Umgebungen \ environment.ts **
user2243747
2

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

Vlad
quelle
Wie kann das Problem behoben werden, dass beim Aufruf von ng build --prod diese Datei enthalten ist und beim Aufrufen von ng serve die andere Datei aufgerufen wird?
Eko
@echonax ja ich sehe es in der main.<hash>.jsDatei
Vlad
Ich weiß nicht, was das bedeutet, aber lassen Sie es mich so sagen. Wenn OP ng Serve aufruft, sucht Angular-Cli environment.tsund wenn ng build --prodes aufgerufen wird, sucht Angular-Cli environment.prod.ts. Wenn Sie es wie Ihre Antwort tun, verwenden sowohl das Produkt als auch die Entwicklungsumgebung dieselbe Konfiguration.
Eko
0

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

Caleb Gramm
quelle
-10

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

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

Neelesh Ahankari
quelle
Ich sehe, dass einige Leute diese Antwort abgelehnt haben. In meinem Fall hat diese Antwort jedoch das Problem behoben, mit dem ich konfrontiert war. Vielen Dank!
Annie