Итак, я пытался создать и развернуть приложение Angular 4 для производства как на Firebase, так и на Heroku, но обнаружил следующую ошибку:
ОШИБКА в / 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 {}
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: '...',
},
};
После изучения StackOverflow и GitHub в поисках возможных решений, похоже, не было разработчиков, которые столкнулись с этой точной ошибкой и опубликовали свои выводы, поэтому мне было интересно, знает ли кто-нибудь, как решить эту проблему. Большое спасибо заранее!
angular
firebase
heroku
environment-variables
firebase-hosting
Энтони Кривонос
источник
источник
environment
импорт?Ответы:
Когда вы запускаете
ng build --prod
angular-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: '...', }, };
источник
environment.ts
код в свойenvironment.prod.ts
файл. Затем я просто запустил:ng build --prod
иfirebase deploy
.Мой подход состоит в том, чтобы объединить общий объект среды с продуктом. Вот мой environment.prod.ts :
import { environment as common } from './environment'; export const environment = { ...common, production: true };
Таким образом, общий объект среды действует как переопределяемый по умолчанию для всех других сред.
источник
Ненавижу дублирование в коде,
поэтому давайте создадим отдельный файл
environments/firebase.ts
с именем contentИспользование
все ясно как по мне
источник
main.<hash>.js
файлеenvironment.ts
а когдаng build --prod
вызывается, angular-cli будет искатьenvironment.prod.ts
. Делая это так, как ваш ответ, и продукт, и среда разработки будут использовать одну и ту же конфигурацию.У меня такая же ошибка, потому что я неправильно написал firebase как firebas
firebas: {apiKey: "...", authDomain: "project.firebaseapp.com", databaseURL: " https://project.firebaseio.com ", projectId: "project", storageBucket: "project.appspot.com" , messagingSenderId: "..."}
источник
Убедитесь, что между
firebase
и нет пробелов:
.То есть так и должно быть
firebase:
, а неfirebase :
.источник