그래서 Firebase와 Heroku에서 프로덕션 용 Angular 4 앱을 빌드하고 배포하려고했지만 다음과 같은 오류가 발생했습니다.
오류 /Users/…/…(57,49) : ‘{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를 샅샅이 뒤져 보니이 정확한 오류가 발생하여 결과를 발표 한 개발자가없는 것 같아서이 문제를 해결하는 방법을 아는 사람이 있는지 궁금합니다. 미리 감사드립니다!
답변
당신이 실행하면 ng build --prod
각-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: '...',
},
};
답변
내 접근 방식은 공통 환경 개체를 prod 개체와 병합하는 것입니다. 내 environment.prod.ts는 다음과 같습니다 .
import { environment as common } from './environment';
export const environment = {
...common,
production: true
};
따라서 공통 환경 개체는 다른 모든 환경에 대해 재정의 가능한 기본값으로 작동합니다.
답변
나는 코드에서 중복되는 것을 싫어
하므로 environments/firebase.ts
콘텐츠로 명명 된 별도의 파일을 만들어 보겠습니다.
export const firebase = {
//...
};
사용법
import {firebase} from '../environments/firebase';
//...
AngularFireModule.initializeApp(firebase)
나에 관해서는 모든 것이 명확하다
답변
‘firebase’를 ‘firebas’로 잘못 입력했기 때문에 동일한 오류가 발생했습니다.
firebas : {apiKey : “…”, authDomain : “project.firebaseapp.com”, databaseURL : ” https://project.firebaseio.com “, projectId : “project”, storageBucket : “project.appspot.com” , messagingSenderId : “…”}
답변
firebase
과 사이에 간격이 없는지 확인하십시오 :
.
즉, 그것은해야 firebase:
하지 firebase :
.