Właściwość „firebase” nie istnieje w typie {produkcja: boolean; }

80

Próbowałem więc zbudować i wdrożyć moją aplikację Angular 4 do produkcji zarówno w Firebase, jak i Heroku, ale napotkałem następujący błąd:

BŁĄD w / Users / ... / ... (57,49): Właściwość „firebase” nie istnieje w typie „{production: boolean; } '.

Występuje, gdy uruchamiam ng build --prod, a moje serwery wdrożeniowe działają doskonale. Oto mój plik app.module.ts , w celach informacyjnych:

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

Po przeszukaniu StackOverflow i GitHub w poszukiwaniu możliwych rozwiązań, wydaje się, że nie ma programistów, którzy napotkali ten dokładny błąd i opublikowali swoje ustalenia, więc zastanawiałem się, czy ktoś wie, jak rozwiązać ten problem. Z góry dziękuję!

Anthony Krivonos
źródło
Jak wygląda Twój environmentimport?
eko
@echonax Pozwól, że zaktualizuję pytanie o mój kod.
Anthony Krivonos

Odpowiedzi:

197

Po uruchomieniu ng build --prodangular-cli użyje environment.prod.tspliku, a zmienna environment.prod.tsfiles environmentnie zawiera firebasepola, stąd otrzymujesz wyjątek.

Dodaj pole do 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: '...',
  },
};
eko
źródło
12
Ty, sir, ratujesz życie. Wszystko, co musiałem zrobić, to zreplikować environment.tskod do mojego environment.prod.tspliku. Potem po prostu pobiegłem: ng build --prodi firebase deploy.
Anthony Krivonos
1
@AnthonyKrivonos cieszę się, że mogłem pomóc :-)
eko
Zgadzam się, teraz dostaję, że firebase nie jest częścią .... podczas gdy dodałem go w obu środowiskach
user7082181
6

Moje podejście polega na scaleniu wspólnego obiektu środowiska z pierwszym produktem. Oto moje environment.prod.ts :

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

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

Tak więc wspólny obiekt środowiska działa jako nadpisywalna wartość domyślna dla wszystkich innych środowisk.

dhilt
źródło
To podejście wygląda dobrze, ale nie jestem pewien, dlaczego Angular 7 cli pokazuje ostrzeżenie, ** WARNING w Wykryto zależność cykliczną: src \ environment \ environment.ts -> src \ environment \ environment.ts **
user2243747
3

Nienawidzę duplikatów w kodzie,
więc stwórzmy osobny plik o nazwie environments/firebase.tsz zawartością

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

użycie

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

jak dla mnie wszystko jasne

Vlad
źródło
Jak więc rozwiązuje to problem polegający na tym, że gdy wywoływana jest funkcja ng build --prod, będzie zawierać ten plik, a gdy wywoływana jest usługa ng serv, wywołuje drugi?
eko
@echonax tak, widzę to w main.<hash>.jspliku
Vlad
Nie wiem, co to znaczy, ale pozwól mi to ująć w ten sposób; kiedy OP wywołuje ng serv, angular-cli będzie szukał, environment.tsa kiedy ng build --prodzostanie wywołany, angular-cli będzie szukał environment.prod.ts. Robiąc to tak, jak odpowiadasz, zarówno środowisko produkcyjne, jak i programistyczne będą używać tej samej konfiguracji.
eko
1

Wystąpił ten sam błąd, ponieważ błędnie napisałem „firebase” jako „firebas”

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

Caleb Grams
źródło
-12

Upewnij się, że nie ma przerwy między firebasea :.

Oznacza to, że powinien on być firebase:nie firebase :.

Neelesh Ahankari
źródło
Widzę, że niektórzy ludzie zagłosowali na tę odpowiedź. Jednak w moim przypadku ta odpowiedź rozwiązała problem, z którym miałem do czynienia. Dzięki!
Annie