Властивість 'firebase' не існує для типу {production: boolean; }

Тому я намагався створити та розгорнути свою програму Angular 4 для виробництва як на Firebase, так і на Heroku, але я натрапив на помилку наступним чином:

ПОМИЛКА в / 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 {}

оточення.prod.ts

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 можливих рішень, здається, немає розробників, які зіткнулися з цією точною помилкою та опублікували свої висновки, тому мені було цікаво, чи хтось знає, як піти на вирішення цієї проблеми. Велике спасибі заздалегідь!

При запуску ng build --prodкутовим клі буде використовувати 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: '...',
  },
};

Мій підхід полягає в об’єднанні об’єкта загального середовища з продуктом. Ось моє середовище.prod.ts :

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

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

Отже, об’єкт загального середовища діє як стандартний за замовчуванням для всіх інших середовищ.

Я ненавиджу дублікати в коді,
тому давайте створимо окремий файл із іменем environments/firebase.tsвмісту

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

використання

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

все зрозуміло як для мене

Я отримав ту саму помилку, оскільки помилково написав слово "firebase", як "firebas"

firebas: {apiKey: "...", authDomain: "project.firebaseapp.com", databaseURL: " https://project.firebaseio.com ", projectId: "project", storageBucket: "project.appspot.com" , messagingSenderId: "..."}

Переконайтесь, що між firebaseі :.

Тобто має бути firebase:, а не firebase :.