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

Question 1

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

/ Users / ... / ...（57,49）中的错误：类型'{不存在属性'firebase'{production：boolean; }'。

它在我运行时发生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 {}

环境产品

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

Question 2

当您运行ng build --prodangular-cli时，将使用该environment.prod.ts文件，而您的environment.prod.tsfilesenvironment变量没有该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: '...',
  },
};

Question 3

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

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

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

因此，公共环境对象是所有其他环境的可替代默认值。

Question 4

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

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

用法

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

就我而言一切都清楚

Question 5

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

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

Question 6

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

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