Property 'firebase' does not exist on type { production: boolean; }

Question

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 /U

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

Make sure there is no gap between firebase and :.

That is, it should be firebase:, not firebase :.