web-dev-qa-db-fra.com

La propriété 'firebase' n'existe pas sur le type {production: boolean; }

J'essayais donc de créer et de déployer mon application Angular 4 pour la production sur Firebase et Heroku, mais j'ai rencontré l'erreur suivante:

ERROR dans/Users/.../... (57,49): La propriété 'firebase' n'existe pas sur le type '{production: boolean; } '.

Cela se produit lorsque je lance ng build --prod, et mes serveurs de déploiement fonctionnent parfaitement. Voici mon fichier app.module.ts, pour référence:

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

Après avoir écumé StackOverflow et GitHub à la recherche de solutions possibles, aucun développeur ne semble avoir rencontré cette erreur et publié ses conclusions. Je me demandais donc si quelqu'un savait comment s'y prendre pour résoudre ce problème. Merci beaucoup d'avance!

angularfirebaseherokuenvironment-variablesfirebase-hosting
48
Anthony Krivonos

Quand vous courez ng build --prod _ angular-cli utilisera le environment.prod.ts fichier et votre environment.prod.ts fichiers environment la variable n'a pas le champ firebase et vous obtenez donc l'exception.

Ajouter le champ à 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: "..."
  }
};
130
eko

Mon approche consiste à fusionner un objet d’environnement commun avec un prod. Voici mon environment.prod.ts:

import { environment as common } from './environment';

export const environment = {
  ...common,
  production: true
};

Donc, un objet environnement commun agit comme valeur par défaut pouvant être remplacée pour tous les autres environnements.

4
dhilt

Je déteste les doublons dans le code
alors créons un fichier séparé nommé environments/firebase.ts avec contenu

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

l'usage

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

tout est clair quant à moi

2
Vlad

J'ai eu la même erreur parce que j'avais mal orthographié 'firebase' en 'firebas'

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

0
Caleb Grams