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

Question

Vì vậy, tôi đã cố gắng để xây dựng và triển khai các kiễu góc 4 ứng dụng của tôi phục vụ sản xuất trên cả hai căn cứ hỏa lực và Heroku, nhưng tôi đã đi qua các lỗi như sau:

ERROR in /Users/.../... (57,49): 
Property 'firebase' does not exist on type '{ production: boolean; }'. 

Nó xảy ra khi tôi chạy ng build --prod, và triển khai của tôi máy chủ đang hoạt động hoàn toàn tốt. Dưới đây là tập tin app.module.ts 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 { } 

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: "..." 
    } 
}; 

Sau khi cọ rửa StackOverflow và GitHub cho giải pháp khả thi, có vẻ như là không có nhà phát triển có 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 không e. Cảm ơn rất nhiều trước!

Answer 1

Khi bạn chạy ng build --prod góc-cli sẽ sử dụng các tập tin environment.prod.ts và environment.prod.ts tập tin của bạn environment biến không có firebase lĩnh vực do đó bạn đang nhận được ngoại lệ.

Thêm lĩnh vực này để 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: "..." 
    } 
}; 

Answer 2

Hãy chắc chắn rằng không có khoảng cách giữa firebase và :.

Tức là, nó phải là firebase:, không phải firebase :.

Answer 3

Tôi ghét bản sao trong mã
vì vậy hãy tạo một file riêng biệt có tên environments/firebase.ts với nội dung

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

việc sử dụng

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

tất cả là rõ ràng như đối với tôi