属性'firebase'在类型{production：boolean; }

问题描述

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

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:

当我运行 ng build --prod 时，和我的部署服务器工作得很好。这是我的 app.module.ts 文件，供参考：

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

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

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!

推荐答案

当您运行 ng build --prod angular-cli将使用 environment.prod.ts 文件和您的 environment.prod.ts 文件 environment 变量没有 firebase 字段，因此您会收到异常。

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.

将字段添加到
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: "..."
  }
};

这篇关于属性'firebase'在类型{production：boolean; }的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！