类型{ production: boolean; }上不存在属性“ firebase”

因此，我试图在 Firebase 和 Heroku 上构建和部署我的 Angular 4应用程序，但我遇到了以下错误:

在/Users/.../... (57,49)中的错误: 属性“ firebase”不存在在类型“{ production: boolean; }”上。

当我运行 ng build --prod时会发生这种情况，并且我的部署服务器工作得非常好。这是我的 应用程序模块文件，作为参考:

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 {}

环保产品

export const environment = {
production: true
};

环境保护

export const environment = {
production: true,
firebase: {
apiKey: '...',
authDomain: 'project.firebaseapp.com',
databaseURL: 'https://project.firebaseio.com',
projectId: 'project',
storageBucket: 'project.appspot.com',
messagingSenderId: '...',
},
};

在搜索了 StackOverflow 和 GitHub 寻找可能的解决方案之后，似乎没有开发人员遇到过这种确切的错误并发布了他们的发现，所以我想知道是否有人知道如何解决这个问题。先说声谢谢！

61823

小开

最佳答案

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

小开

Make sure there is no gap between firebase and :.

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

小开

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

小开

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.

小开

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