Property 'firebase' does not exist on type { production: boolean; }
AngularFirebaseHerokuEnvironment VariablesFirebase HostingAngular Problem Overview
So I was trying to build and deploy my Angular 4 app for production on both Firebase and Heroku, but I have come across the error as follows:
> ERROR in /Users/.../... (57,49): Property 'firebase' does not exist > on type '{ production: boolean; }'.
It occurs when I run ng build --prod
, and my deployment servers are working perfectly fine. Here is my app.module.ts file, for reference:
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: '...',
},
};
After scouring StackOverflow and GitHub for possible solutions, there seem to be no developers who have encountered this exact error and published their findings, so I was wondering whether anyone knows how to go about solving this issue. Thanks so much in advance!
Angular Solutions
Solution 1 - Angular
When you run ng build --prod
angular-cli will use the environment.prod.ts
file and your environment.prod.ts
files environment
variable doesn't have the firebase
field hence you are getting the exception.
Add the field to
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: '...',
},
};
Solution 2 - Angular
My approach is to merge common environment object with prod one. Here's my environment.prod.ts:
import { environment as common } from './environment';
export const environment = {
...common,
production: true
};
So common environment object acts as an overridable default for all other environments.
Solution 3 - Angular
I hate duplicates in code
so let's create a separate file named environments/firebase.ts
with content
export const firebase = {
//...
};
the usage
import {firebase} from '../environments/firebase';
//...
AngularFireModule.initializeApp(firebase)
all is clear as for me
Solution 4 - Angular
I got the same error because I had misspelled 'firebase' as 'firebas'
firebas: { apiKey: "...", authDomain: "project.firebaseapp.com", databaseURL: "https://project.firebaseio.com";, projectId: "project", storageBucket: "project.appspot.com", messagingSenderId: "..." }
Solution 5 - Angular
Make sure there is no gap between firebase
and :
.
That is, it should be firebase:
, not firebase :
.