web-dev-qa-db-ja.com

プロパティ「firebase」はタイプ{production：boolean;に存在しません}

だから私は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 { }

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で可能な解決策を探した後、この正確なエラーに遭遇して発見したことを公開している開発者はいないようです。事前に感謝します！

angularfirebaseherokuenvironment-variablesfirebase-hosting
48
Anthony Krivonos

ng build --prodを実行すると、angle-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: "..."
  }
};
130
eko

私のアプローチは、共通の環境オブジェクトと製品のオブジェクトをマージすることです。これが私のenvironment.prod.tsです：

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

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

したがって、共通の環境オブジェクトは、他のすべての環境のオーバーライド可能なデフォルトとして機能します。

4
dhilt

コードの重複が嫌い
それでは、コンテンツを含むenvironments/firebase.tsという名前の別のファイルを作成しましょう

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

使い方

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

私にとってはすべてが明確です

2
Vlad

「firebase」と「firebas」のスペルを間違えたため、同じエラーが発生しました

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

0
Caleb Grams