La propiedad 'firebase' no existe en el tipo {producción: booleano; }


80

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

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

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

environment.prod.ts

export const environment = {
  production: true
};

environment.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 revisar StackOverflow y GitHub en busca de 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!


¿Cómo se environmentve su importación?
eko

@echonax Permíteme actualizar la pregunta con mi código.
Anthony Krivonos

Respuestas:


197

Cuando ejecute ng build --prodangular-cli usará el environment.prod.tsarchivo y la variable de sus environment.prod.tsarchivos environmentno tiene el firebasecampo, 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: '...',
  },
};

12
Usted, señor, es un salvavidas. Todo lo que tenía que hacer era replicar mi environment.tscódigo en mi environment.prod.tsarchivo. Luego, simplemente ejecuté: ng build --prody firebase deploy.
Anthony Krivonos

1
@AnthonyKrivonos me alegro de poder ayudar :-)
eko

Estoy de acuerdo, ahora obtengo que firebase no es parte de .... mientras lo agregué en ambos
entornos

6

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


Este enfoque me parece bien, pero no estoy seguro de por qué Angular 7 cli muestra una advertencia, ** ADVERTENCIA en la dependencia circular detectada: src \ environment \ environment.ts -> src \ environment \ environment.ts **
user2243747

3

Odio los duplicados en el código,
así que creemos un archivo separado environments/firebase.tscon el nombre del contenido

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

el uso

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

todo esta claro como para mi


Entonces, ¿cómo superará esto el problema de que cuando se llama a ng build --prod, incluirá este archivo y cuando se llama a ng serve, llamará al otro?
eko

@echonax sí, lo veo en el main.<hash>.jsarchivo
Vlad

No sé lo que eso significa, pero déjeme ponerlo de esta manera; cuando OP llama a ng serve, angular-cli buscará environment.tsy cuando ng build --prodse llame, angular-cli buscará environment.prod.ts. Al hacerlo como su respuesta, tanto el entorno de desarrollo como el de producción utilizarán la misma configuración.
eko

1

Recibí el mismo error porque había escrito mal 'firebase' como 'firebas'

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


-12

Asegúrese de que no haya espacio entre firebasey: .

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


Veo que algunas personas votaron en contra de esta respuesta. Sin embargo, en mi caso, esta respuesta solucionó el problema al que me enfrentaba. ¡Gracias!
Annie
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.