'firebase' 속성이 {production: boolean; } 유형에 없습니다.

'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 {}

환경.vmdk.ts

export const environment = {
  production: true
};

환경.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에서 가능한 해결책을 찾아본 결과, 이 정확한 오류를 만나 연구 결과를 발표한 개발자가 없는 것 같습니다. 그래서 이 문제를 해결하는 방법을 아는 사람이 있는지 궁금합니다.잘 부탁드립니다!

실행할 때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: '...',
  },
};

제 접근 방식은 공통 환경 객체를 프로톤과 병합하는 것입니다.다음은 내 환경입니다.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 ", 데이터베이스URL: "https://project.firebaseio.com ", projectId: "project", storageBucket: "project.appspot.com ", messagingSenderId: "..." }

사이에 틈이 없는지 확인합니다.firebase그리고.:.

즉, 그래야 합니다.firebase:,것은 아니다.firebase :.

언급URL : https://stackoverflow.com/questions/44033079/property-firebase-does-not-exist-on-type-production-boolean