Question

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

/ Users / ... / ...（57,49）中的错误：物业＆＃39; firebase＆＃39;不存在 on type＆＃39; {production：boolean; }＆＃39;

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

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

Answer 2

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

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

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

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

Answer 3

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

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

用法

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

对我来说一切都很清楚

Answer 4

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

firebas：{ apiKey：“ ...”， authDomain：“ project.firebaseapp.com”， databaseURL：“ https://project.firebaseio.com”， projectId：“项目”， storageBucket：“ project.appspot.com”， messagesSenderId：“ ...” }

Answer 5

确保firebase和:之间没有差距。

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

物业＆＃39; firebase＆＃39;在{production：boolean;类型上不存在}

5 个答案: