angular - functions - La propiedad ''firebase'' no existe en el tipo{producción: boolean;}

functions in firebase

Question

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

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

Ocurre cuando ejecuto ng build --prod , y mis servidores de implementación funcionan perfectamente bien. Aquí está mi archivo app.module.ts , para 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 { }

medio ambiente.prod.ts

export const environment = {
production: true
};

medio ambiente.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 buscar en StackOverflow y GitHub 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!

Answer 1

Asegúrese de que no haya espacios entre la base de firebase y :

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

Answer 2

Cuando ejecute ng build --prod angular-cli usará el archivo environment.prod.ts y la variable de environment sus archivos environment no tiene el campo base de firebase , 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: "..."
}
};

Answer 3

Mi enfoque es fusionar un objeto de entorno común con uno. 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.

Answer 4

Odio los duplicados en el código
así que vamos a crear un archivo separado llamado los environments/firebase.ts con contenido

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

el uso

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

todo esta claro para mi