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

Posted 2023-02-22

【中文标题】类型 production: boolean; 上不存在属性“firebase”

【英文标题】：Property 'firebase' does not exist on type production: boolean; 类型 production: boolean; 上不存在属性“firebase”

【发布时间】：2017-10-17 09:38:31

【问题描述】：

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

/Users/.../... (57,49) 中的错误：属性“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: '...',
  ,
;

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

【问题讨论】：

您的environment 导入是什么样的？

@echonax 让我用我的代码为您更新问题。

【参考方案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: '...',
  ,
;

【讨论】：

您，先生，是救生员。我所要做的就是将我的environment.ts 代码复制到我的environment.prod.ts 文件中。然后，我简单地跑了：ng build --prod 和 firebase deploy。

@AnthonyKrivonos 很高兴我能帮上忙 :-)

我同意，现在我知道 firebase 不属于 .... 而我在两个环境中都添加了它

【参考方案2】：

我的方法是将公共环境对象与产品一合并。这是我的 environment.prod.ts：

import  environment as common  from './environment';

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

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

【讨论】：

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

【参考方案3】：

我讨厌代码中的重复 所以让我们创建一个名为environments/firebase.ts 的单独文件，其中包含内容

export const firebase = 
    //...
;

用法

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

对我来说一切都清楚

【讨论】：

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

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

我不知道这是什么意思，但让我这样说吧；当 OP 调用 ng serve 时，angular-cli 将寻找 environment.ts，当调用 ng build --prod 时，angular-cli 将寻找 environment.prod.ts。按照您的回答，产品和开发环境都将使用相同的配置。

【参考方案4】：

我遇到了同样的错误，因为我将“firebase”拼错为“firebas”

萤火虫： apiKey: "...", authDomain: "project.firebaseapp.com", 数据库URL: "https://project.firebaseio.com", 项目 ID：“项目”， storageBucket: "project.appspot.com", 消息发送者ID：“...”

【参考方案5】：

确保firebase 和: 之间没有间隙。

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

【讨论】：

我看到有些人对这个答案投了反对票。但是，就我而言，这个答案解决了我面临的问题。谢谢！