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

Question

J'ai donc essayé de construire et de déployer mon application Angular 4 pour la production à la fois sur Firebase et Heroku, mais je suis tombé sur l'erreur suivante :

ERREUR dans /Utilisateurs/.../... (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 bien. Voici mon app.module.ts à titre de 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 {}

environnement.prod.ts

export const environment = {
  production: true
};

environnement.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 parcouru StackOverflow et GitHub à la recherche de solutions possibles, il semble qu'aucun développeur n'ait rencontré cette erreur exacte et publié ses conclusions. Je me demandais donc si quelqu'un savait comment résoudre ce problème. Merci beaucoup d'avance !

Answer 1

Lorsque vous exécutez ng build --prod angular-cli utilisera l'option environment.prod.ts et votre environment.prod.ts fichiers environment ne dispose pas de la variable firebase d'où l'exception que vous obtenez.

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

Answer 2

Mon approche consiste à fusionner l'objet d'environnement commun avec celui de la production. Voici mon environnement.prod.ts :

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

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

Ainsi, l'objet d'environnement commun agit comme un défaut surmontable pour tous les autres environnements.

Answer 3

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

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

l'usage

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

tout est clair pour moi

Answer 4

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

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

Answer 5

Assurez-vous qu'il n'y a pas d'espace entre firebase y : .

C'est-à-dire qu'il devrait être firebase: pas firebase : .