"firebase属性在{ production: boolean; }类型上不存在。"

Question

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

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

这个错误出现在我运行ng build --prod命令时。我的部署服务器工作得非常好。这是我的app.module.ts文件，以供参考：

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 寻找可能的解决方案后，似乎没有开发者遇到过这个确切的错误并发表过他们的发现，所以我想知道是否有人知道如何解决这个问题。非常感谢您提前的帮助！

- Anthony Krivonos

---

你的 环境 导入看起来是什么样子？ - eko

@echonax 让我用我的代码更新一下问题。 - Anthony Krivonos

Answer 1

当你运行ng build --prod时，Angular CLI将使用environment.prod.ts文件，而你的environment.prod.ts文件中的environment变量没有firebase字段，因此你会收到异常错误。在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: '...',
  },
};

- eko

---

您太棒了，只需要将您的environment.ts中的代码复制到environment.prod.ts文件中即可。然后，运行以下命令：ng build --prod和firebase deploy。 - Anthony Krivonos

@AnthonyKrivonos 很高兴我能帮到你 :-) - eko

我同意，现在我明白Firebase不是环境的一部分，尽管我在两个环境中都添加了它。 - user7082181

如果您正在构建生产环境，您需要将配置添加到 environment.prod.ts 文件中。这对我起作用了。 - Nurudin Lartey

Answer 2

我的做法是将通用环境对象与生产环境合并。这是我的environment.prod.ts文件：

import { environment as common } from './environment';

export const environment = {
  ...common,
  production: true
};

因此，通用环境对象作为所有其他环境的可覆盖默认值。

- dhilt

---

这个方法对我来说看起来不错，但不确定为什么 Angular 7 cli 显示警告：“** 警告：检测到循环依赖： src\environments\environment.ts -> src\environments\environment.ts **”。 - user2243747

Answer 3

我讨厌代码中的重复内容
因此，我们需要创建一个名为environments/firebase.ts的单独文件，并将以下内容添加进去：

export const firebase = {
    //...
};

使用方法

import {firebase} from '../environments/firebase';
//...
AngularFireModule.initializeApp(firebase)

我对此完全清楚

- Vlad

---

那么这个问题该如何解决呢？当调用 ng build --prod 时，它会包含这个文件，而当调用 ng serve 时，它会调用另一个文件。 - eko

@echonax 是的，我在 main.<hash>.js 文件中看到了它。 - Vlad

我不知道那是什么意思，但让我这样说吧；当 OP 调用 ng serve 时，angular-cli 会寻找 environment.ts 文件，而当调用 ng build --prod 时，angular-cli 会寻找 environment.prod.ts 文件。通过像你的答案那样做，生产环境和开发环境将使用相同的配置。 - eko

Answer 4

我因将'firebase'错拼为'firebas'而遇到了相同的错误。 firebas: { apiKey: "...", authDomain: "project.firebaseapp.com", databaseURL: "https://project.firebaseio.com", projectId: "project", storageBucket: "project.appspot.com", messagingSenderId: "..." }

- Caleb Grams

Answer 5

请确保firebase和:之间没有空格。

也就是说，应该是firebase:而不是firebase :。

- Neelesh Ahankari

---

我看到有些人对这个答案进行了负评。但是，在我的情况下，这个答案解决了我遇到的问题。谢谢！ - Annie