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 --prod
und 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!
angular
firebase
heroku
environment-variables
firebase-hosting
Anthony Krivonos
quelle
quelle
environment
Import aus?Antworten:
Wenn Sie
ng build --prod
angle-cli ausführen, wird dieenvironment.prod.ts
Datei verwendet und Ihreenvironment.prod.ts
Dateivariableenvironment
hat dasfirebase
Feld nicht, daher wird die Ausnahme angezeigt.Fügen Sie das Feld hinzu
environment.prod.ts
quelle
environment.ts
Code in meineenvironment.prod.ts
Datei replizieren . Dann rannte ich einfach:ng build --prod
undfirebase deploy
.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.
quelle
Ich hasse Duplikate im Code,
also erstellen wir eine separate Datei mit dem Namen
environments/firebase.ts
Inhaltdie Verwendung
Alles ist klar für mich
quelle
main.<hash>.js
Dateienvironment.ts
und wennng build --prod
es aufgerufen wird, sucht Angular-Clienvironment.prod.ts
. Wenn Sie es wie Ihre Antwort tun, verwenden sowohl das Produkt als auch die Entwicklungsumgebung dieselbe Konfiguration.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: "..."}
quelle
Stellen Sie sicher, dass zwischen
firebase
und keine Lücke besteht:
.Das heißt, es sollte
firebase:
nicht seinfirebase :
.quelle