Thuộc tính 'firebase' không tồn tại trên loại {production: boolean; }

Vì vậy, tôi đã cố gắng xây dựng và triển khai ứng dụng Angular 4 của mình để sản xuất trên cả Firebase và Heroku, nhưng tôi đã gặp lỗi như sau:

ERROR trong / Users / ... / ... (57,49): Thuộc tính 'firebase' không tồn tại trên loại '{production: boolean; } '.

Nó xảy ra khi tôi chạy ng build --prodvà các máy chủ triển khai của tôi đang hoạt động hoàn toàn tốt. Đây là tệp app.module.ts của tôi , để tham khảo:

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

môi trường.prod.ts

export const environment = {
  production: true
};

môi trường.ts

export const environment = {
  production: true,
  firebase: {
    apiKey: '...',
    authDomain: 'project.firebaseapp.com',
    databaseURL: 'https://project.firebaseio.com',
    projectId: 'project',
    storageBucket: 'project.appspot.com',
    messagingSenderId: '...',
  },
};

Sau khi tìm kiếm các giải pháp khả thi trên StackOverflow và GitHub, dường như không có nhà phát triển nào gặp phải lỗi chính xác này và công bố phát hiện của họ, vì vậy tôi đã tự hỏi liệu có ai biết cách giải quyết vấn đề này hay không. Cảm ơn rất nhiều trước!

Khi bạn chạy ng build --prodangle-cli sẽ sử dụng environment.prod.tstệp và biến environment.prod.tstệp của bạn environmentkhông có firebasetrường do đó bạn nhận được ngoại lệ.

Thêm trường vào 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: '...',
  },
};

Cách tiếp cận của tôi là hợp nhất đối tượng môi trường chung với sản phẩm. Đây là môi trường của tôi.prod.ts :

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

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

Vì vậy, đối tượng môi trường chung hoạt động như một mặc định có thể ghi đè cho tất cả các môi trường khác.

Tôi ghét các đoạn mã trùng lặp
vì vậy hãy tạo một tệp riêng có tên environments/firebase.tsvới nội dung

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

việc sử dụng

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

tất cả đều rõ ràng đối với tôi

Tôi gặp lỗi tương tự vì tôi đã viết sai chính tả 'firebase' thành 'firebas'

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

Đảm bảo rằng không có khoảng cách giữa firebasevà :.

Đó là, nó nên được firebase:, không phải firebase :.