생산 모드를 활성화하는 방법은 무엇입니까?


182

나는 관련 질문을 읽고 있던 나는 발견 이 하나 ,하지만 생산 모드로 개발 전환 할 수있는 방법을 내 질문입니다. 여기서 지적한 모드 사이에는 약간의 차이가 있습니다 .

콘솔에서 볼 수는 ....Call enableProdMode() to enable the production mode.있지만 해당 메소드를 호출 해야하는 유형의 인스턴스가 확실하지 않습니다.

누군가이 질문에 대답 할 수 있습니까?


: 내가 만든 간단한 솔루션을 웹팩 2+ Angular2와 타이프 라이터를 사용하여 미친 통과 구성 발견 github.com/Sweetog/yet-another-angular2-boilerplate
브라이언 오그 덴

답변:


211

부트 스트랩을 호출하기 전에 함수를 가져 와서 실행하여 활성화 할 수 있습니다.

import {enableProdMode} from '@angular/core';

enableProdMode();
bootstrap(....);

그러나이 오류는 바인딩에 문제가 있음을 나타내는 지표이므로 무시하지 말고 왜 발생하는지 파악하십시오.


Typescript를 사용하지 않는 경우 ProdMode ()를 활성화하는 방법은 무엇입니까? ng.platform.browser.bootstrap (...) 전에이 메소드를 호출하면이 오류가 발생합니다. enableProdMode가 정의되어 있지 않습니다.
Daniel Dudas

2
@DanielDudas 나는 es5를 사용하지 않지만 시도해보십시오ng.core.enableProdMode()
Sasxa

3
"angular2 / core"는 이제 "@ angular / core"라고 생각합니다. 아래 답변을 참조하십시오.
adampasz

Ionic2를 사용하고 있습니다. 이 부트 스트랩은 어떤 파일에서 호출됩니까? 샘플 앱을 생성 할 때 ionic start test sidemenu --v2 --ts볼 수 app.ts있지만이 부트 스트랩 함수는 어디에서 호출됩니까?
Guus

1
나는 똑같이했지만 "플랫폼 설정 후 prod 모드를 사용할 수 없습니다"와 같은 예외가 발생합니다. 누구든지 이것을 해결하는 데 도움을 줄 수 있습니까?
Gowtham

81

Angular 2 응용 프로그램에서 프로덕션 모드를 활성화하는 가장 좋은 방법은 angular-cli 를 사용하여 응용 프로그램을 빌드하는 것입니다 ng build --prod. 프로덕션 프로파일을 사용하여 애플리케이션을 빌드합니다. angular-cli를 사용 하면 코드를 항상 변경하지 않고 개발 ng serve하거나 사용 ng build하는 동안 개발 모드를 사용할 수 있다는 이점 이 있습니다.


6
Angular 6을 사용하고 있으며 prod 모드에서 빌드하는 빌드입니다. 이 페이지를 방문하는 신규 이민자를 위해 여기에 넣으십시오.
Verbose

isDevMode와 enableProdMode를 염두에두고 build --prod 가 구현되었다고 생각합니다 . 이 답변은 답변으로 표시되어야합니다
bubi

58

이것은 Angular 2 (2.0.0-rc.1)의 최신 릴리스를 사용하여 저에게 효과적이었습니다.

main.ts

import {enableProdMode} from '@angular/core';

enableProdMode();
bootstrap(....);

다음은 해당 문서에서 함수 참조입니다. https://angular.io/api/core/enableProdMode



1
@emp 공식 Angular 문서 enableProdMode어디로 전화 해야하는지 알려주지 않은 것에 놀랐 습니다.
Dai

55

angular-cli를 사용하여 새 프로젝트를 만들 때. environment.ts라는 파일이 포함되었습니다. 이 파일 안에는 변수가 있습니다.

export const environment = {
  production: true
};

그런 다음 main.ts에 이것이 있습니다.

import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

enableProdMode ()를 @ angular / core에서 가져 오기 때문에 이것을 angular-cli가 아닌 프로젝트에 추가 할 수 있습니다.


비 Prod 빌드에서는 어떻게 작동합니까? 이 경우 environment.ts가 무시된다고 가정하므로 모듈을 가져 오려고 할 때 tsc 컴파일 오류가 발생하지 않습니까?
llasarov

@llasarov the environment.ts는 구성 파일처럼 작동하며 프로덕션 모드를 켜거나 끌 수 있습니다. main.ts는 true 인 경우 enableProdMode를 호출하므로 특정 빌드 프로세스없이 수행 할 수 있습니다. logMode가 디버그인지 확인한 다음 세부 StackTrace를 수행하는 사용자 정의 로거 서비스를 확인하고 다른 하나의 라이너 만 로깅하여 로깅을
선택할 수도 있습니다.

13

src/enviroments/enviroments.ts프로덕션 모드로 이동하여 활성화

export const environment = {
  production: true
};

각도 2


10

각도 6.XX에서 생산 모드를 활성화하려면 환경 파일로 이동하십시오.

이 길처럼

당신의 경로 : project>\src\environments\environment.ts

에서 변경 production: false:

export const environment = {
  production: false
};

export const environment = {
  production: true
};

여기에 이미지 설명을 입력하십시오


8

대부분의 경우 prod 모드는 개발 시간 동안 필요하지 않습니다. 따라서 우리의 해결 방법은 로컬 호스트 가 아닌 경우에만 사용하는 것입니다 .

main.ts루트 AppModule을 정의하는 브라우저 에서 :

const isLocal: boolean = /localhost/.test(document.location.host);
!isLocal && enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

isLocal또한 같은 다른 목적으로 사용할 수 있습니다 enableTracing에 대한 RouterModuleDEV 단계에서 더 나은 디버깅을 위해 스택 추적.


6

ng build 명령을 사용하면 environment.ts 파일을 덮어 씁니다.

기본적으로 ng build 명령을 사용하면 dev 환경이 설정됩니다.

프로덕션 환경을 사용하려면 ng build --env = prod 명령을 사용하십시오.

프로덕션 모드를 활성화하고 environment.ts 파일을 자동으로 업데이트합니다.


1
이는 Angular CLI 6에서 ng build --configuration=production(기본적으로 CLI 생성 angular.json 파일을 사용하여) 으로 변경되었습니다 .
slasky

5

당신은 당신의 app.ts에서 사용할 수 있습니다 || main.ts 파일

import {enableProdMode} from '@angular/core';
enableProdMode();
bootstrap(....);

4

TypeScript로 전환하지 않고 업그레이드 경로를 수행하는 사람들은 다음을 사용하십시오.

ng.core.enableProdMode()

나를 위해 (자바 스크립트에서) 다음과 같습니다.

var upgradeAdapter = new ng.upgrade.UpgradeAdapter();
ng.core.enableProdMode()
upgradeAdapter.bootstrap(document.body, ['fooApp']);

4

seed 프로젝트에서 제공 할 environment.ts 또는 해당 파일이 필요하지 않습니다. configuration.ts 만 가지고 런타임 결정이 필요한 모든 항목을 추가하십시오 (예 : 로깅 구성 및 URL). 이것은 모든 디자인 구조에 적합하며 미래에도 도움이 될 것입니다.

configuration.ts

export class Configuration {

   isInProductionMode : bool = true;

   // other configuration
   serviceUrl : string = "http://myserver/myservice.svc";
   logFileName : string = "...";
}

// 이제 시작 코드 (main.ts 또는 seed 프로젝트 디자인에 따라 동등한 코드)에서 사용하십시오.

import { Configuration } from './configuration';
import { enableProdMode } from '@angular/core';
....
if (Configuration.isInProductionMode)
    enableProdMode();

1
prod / dev isInProductionMode를 어떻게 true / false로 구별 합니까? 빌드 타임에?
LeOn-Han Li

일반적으로 GULP 파라미터 또는 이와 동등한 것으로
NitinSingh

JSON에는 다음과 같은 항목이 있습니다.- "environmentSource": "environments / environment.ts", "environments": { "dev": "environments / environment.ts", "prod": "environments / environment.prod.ts" }
NitinSingh



0

내 Angular 2 프로젝트에는 다른 답변을 언급 한 "main.ts"파일이 없지만 " boot.ts "파일이 있습니다.이 파일은 거의 같은 것 같습니다. (차이는 아마도 Angular 버전이 다르기 때문일 것입니다.)

import"boot.ts" 의 마지막 지시문 뒤에이 두 줄을 추가하면 나에게 도움이되었습니다.

import { enableProdMode } from "@angular/core";
enableProdMode();
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.