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