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ę!
angular
firebase
heroku
environment-variables
firebase-hosting
Anthony Krivonos
źródło
źródło
environment
import?Odpowiedzi:
Po uruchomieniu
ng build --prod
angular-cli użyjeenvironment.prod.ts
pliku, a zmiennaenvironment.prod.ts
filesenvironment
nie zawierafirebase
pola, 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: '...', }, };
źródło
environment.ts
kod do mojegoenvironment.prod.ts
pliku. Potem po prostu pobiegłem:ng build --prod
ifirebase deploy
.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.
źródło
Nienawidzę duplikatów w kodzie,
więc stwórzmy osobny plik o nazwie
environments/firebase.ts
z zawartościąużycie
jak dla mnie wszystko jasne
źródło
main.<hash>.js
plikuenvironment.ts
a kiedyng build --prod
zostanie 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.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: "..."}
źródło
Upewnij się, że nie ma przerwy między
firebase
a:
.Oznacza to, że powinien on być
firebase:
niefirebase :
.źródło