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