Свойство firebase не существует для типа {production: boolean; }


80

Итак, я пытался создать и развернуть приложение 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 {}

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 в поисках возможных решений, похоже, не было разработчиков, которые столкнулись с этой точной ошибкой и опубликовали свои выводы, поэтому мне было интересно, знает ли кто-нибудь, как решить эту проблему. Большое спасибо заранее!


Как выглядит ваш environmentимпорт?
eko

@echonax Позвольте мне обновить ваш вопрос своим кодом.
Энтони Кривонос

Ответы:


197

Когда вы запускаете ng build --prodangular-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: '...',
  },
};

12
Вы, сэр, спасаете жизнь. Все, что мне нужно было сделать, это скопировать мой environment.tsкод в свой environment.prod.tsфайл. Затем я просто запустил: ng build --prodи firebase deploy.
Энтони Кривонос

1
@AnthonyKrivonos рад, что смог помочь :-)
eko

Я согласен, теперь я получаю firebase, не
являющуюся

6

Мой подход состоит в том, чтобы объединить общий объект среды с продуктом. Вот мой 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 **
user2243747

3

Ненавижу дублирование в коде,
поэтому давайте создадим отдельный файл environments/firebase.tsс именем content

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

Использование

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

все ясно как по мне


Итак, как это решить проблему, заключающуюся в том, что при вызове ng build --prod он будет включать этот файл, а при вызове ng serve он будет вызывать другой?
eko

@echonax да, я вижу это в main.<hash>.jsфайле
Влад

Я не знаю, что это значит, но позвольте мне сказать так; когда OP вызывает ng serve, angular-cli будет искать, environment.tsа когда ng build --prodвызывается, angular-cli будет искать environment.prod.ts. Делая это так, как ваш ответ, и продукт, и среда разработки будут использовать одну и ту же конфигурацию.
eko

1

У меня такая же ошибка, потому что я неправильно написал firebase как firebas

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


-12

Убедитесь, что между firebaseи нет пробелов :.

То есть так и должно быть firebase:, а не firebase :.


Я вижу, что некоторые люди проголосовали против этого ответа. Однако в моем случае этот ответ устранил проблему, с которой я столкнулся. Благодаря!
Энни
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.