유형 {production : boolean; }


80

그래서 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를 샅샅이 뒤져 보니이 정확한 오류가 발생하여 결과를 발표 한 개발자가없는 것 같아서이 문제를 해결하는 방법을 아는 사람이 있는지 궁금합니다. 미리 감사드립니다!


environment가져 오기는 어떻게 생겼습니까?
eko

@echonax 내 코드로 질문을 업데이트하겠습니다.
Anthony Krivonos

답변:


197

당신이 실행하면 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: '...',
  },
};

12
당신은 생명의 은인입니다. 내가해야 할 일은 environment.ts코드를 environment.prod.ts파일 에 복제하는 것 뿐 이었습니다 . 그런 다음 간단히 실행했습니다. ng build --prodfirebase deploy.
Anthony Krivonos

1
@AnthonyKrivonos 내가 도울 수있어서 다행이다 :-)
eko

나는 두 environement에 추가하면서 동의, 지금은 .... 중포 기지가의 일부가 아닌 얻을
user7082181

6

내 접근 방식은 공통 환경 개체를 prod 개체와 병합하는 것입니다. 내 environment.prod.ts는 다음과 같습니다 .

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

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

따라서 공통 환경 개체는 다른 모든 환경에 대해 재정의 가능한 기본값으로 작동합니다.


> SRC \ 환경 \ environment.ts ** - SRC \ 환경 \ environment.ts :이 방법은 있는지 왜 경고 각도 (7 개) CLI 쇼, 순환 의존성에 경고가 감지 ** 나에게 잘 보이는 아니지만
user2243747

3

나는 코드에서 중복되는 것을 싫어
하므로 environments/firebase.ts콘텐츠로 명명 된 별도의 파일을 만들어 보겠습니다.

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

사용법

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

나에 관해서는 모든 것이 명확하다


그러면 ng build --prod가 호출 될 때이 파일이 포함되고 ng serve가 호출 될 때 다른 파일을 호출하는 문제를 어떻게 극복 할 수 있습니까?
eko

@echonax 예, main.<hash>.js파일 에서 볼 수 있습니다
Vlad

그게 무슨 뜻인지 모르겠지만 이렇게 말하겠습니다. 때 역할을 NG 영업 통화를 찾습니다 각도-CLI environment.tsng build --prod호출을 위해 각-CLI 볼 것이다 environment.prod.ts. 답변처럼 수행하면 prod 및 개발 환경 모두 동일한 구성을 사용합니다.
eko

1

'firebase'를 'firebas'로 잘못 입력했기 때문에 동일한 오류가 발생했습니다.

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


-12

firebase과 사이에 간격이 없는지 확인하십시오 :.

즉, 그것은해야 firebase:하지 firebase :.


일부 사람들이이 답변에 투표 한 것을 봅니다. 그러나 제 경우에는이 답변이 내가 직면 한 문제를 해결했습니다. 감사!
Annie
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.