프로덕션 또는 개발 모드에서 Angular 애플리케이션이 실행 중인지 확인하는 방법


131

이것은 쉬운 것처럼 보이지만 해결책을 찾지 못했습니다.

그렇다면 앱이 프로덕션 모드 또는 개발자 모드에서 실행되고 있는지 어떻게 확인합니까?

답변:


198

이 기능을 사용할 수 있습니다 isDevMode

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

...
export class AppComponent { 
  constructor() {
    console.log(isDevMode());
  }
}

참고 사항 : 이 기능에 주의 하십시오

if(isDevMode()) {
  enableProdMode();
}

당신은 얻을 것이다

오류 : 플랫폼 설정 후 prod 모드를 사용할 수 없습니다

다른 옵션

환경 변수

import { environment } from 'src/environments/environment';

if (environment.production) {
  //
}

webpack process.env.NODE_ENV 변수에 의해 주입

declare let process: any;
const env = process.env.NODE_ENV;

if (env  === 'production') {
  //
}

언급 한 것과 동일한 오류가 발생합니다. "플랫폼 설정 후 prod 모드를 사용할 수 없습니다". 이 문제를 해결하는 데 도움을 주시겠습니까? @yurzui
Gowtham

@Gowtham 전화하기 전에 활성화해야합니다platformBrowserDynamic().bootstrapModule(AppModule);
yurzui

그것이 바로 내가 부르는 방법입니다. 여전히 프로덕션 모드 @yurzui에서 앱을 실행하려고 할 때 마다이 오류가 발생합니다. 이 문제를 해결하는 데 도움이 될 것입니다. 감사합니다
Gowtham

@Gowtham 그것을 재현 할 예가 있습니까?
yurzui

2
angular.io/api/core/isDevMode "한 번 호출하면 값이 잠기고 더 이상 변경되지 않습니다." 답은 문서와이 경고를 포함해야합니다!
jasie

38

https://angular.io/guide/deployment#enable-production-mode 의 Angular 배포 가이드에 따라 :

프로덕션 환경을 구축하거나 --environment = prod 플래그를 추가하면 프로덕션 모드를 사용할 수 있습니다 . CLI 생성 콘솔을 통해 main.ts작동 방식을 확인하십시오.

main.ts 다음이 있습니다.

import { environment } from './environments/environment';

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

environment.production생산 중인지 확인 하십시오.

아마 당신은 전화하고 싶지 않습니다 isDevMode(). https://angular.io/api/core/isDevMode 의 Angular API 설명서에 따라 :

한 번 호출 된 후에는 값이 잠기고 더 이상 변경되지 않습니다 ... 사용자가 이것을 호출하기 전에 enableProdMode를 호출하지 않으면 기본적으로 true입니다.

빌드 isDevMode()에서 호출 하면 ng build --prod항상 true를 반환하고 항상 dev 모드에서 실행되도록 잠급니다. 대신 environment.production생산 중인지 확인 하십시오. 그런 다음 프로덕션 모드를 유지합니다.


2
이것이 정답입니다. (적절한 문서 연결 및 설명)
jasie

1
가치가 변하지 않는다고해서 그 가치를 부르고 싶지 않다는 의미는 아닙니다. 응용 프로그램이 실행되는 동안 dev 모드에서 prod 모드로 전환하거나 다시 전환해서는 안됩니다. 따라서 생산 모드를 활성화 해야하는지 여부를 결정하려고 할 때 환경 변수가 올바른 방법이지만 개발 모드에서 약간 다르게 작동 해야하는 서비스 isDevMode()가 있다면 완벽하게 훌륭한 방법입니다. 그.
StriplingWarrior

4

그것은 당신이 요구하는 것에 달려 있습니다 ...

mode@yurzui가 말했듯이 Angular 에 대해 알고 싶다면 전화해야 { isDevMode } from @angular/core하지만 false전화 enableProdMode하기 전에 만 반환 할 수 있습니다 .

빌드 환경 을 알고 싶다면 , 즉 앱이 축소되어 실행중인 경우 빌드 시스템에서 빌드 변수를 설정해야합니다. 예를 들어을 사용 Webpack하면을 살펴 봐야 definePlugin합니다.

https://webpack.github.io/docs/list-of-plugins.html#defineplugin

new webpack.DefinePlugin({
  ENV_PRODUCTION: !!process.env.NODE_ENV
});

실제로 둘 다 찾고있었습니다. angular-cli를 통해 webpack을 사용하고 있습니다. 코드 줄은 어디에 추가합니까? 타이프 스크립트 파일에서 해당 변수에 어떻게 액세스 할 수 있습니까? 답변을 업데이트 할 수 있다면 좋을 것입니다.
maxbellec

ngcli.github.io/#getting-started-project-structure 다음에 webpack.config.js 를 편집 한 다음 내 답변의 링크를 따라
가십시오

게시물의 링크는, heres는 진부됩니다에 대한 올바른 정의 플러그인
HostMyBus

2
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module'


platformBrowserDynamic().bootstrapModule(AppModule);
enableProdMode();

이것은 내 코드이므로 동일한 오류가 발생했습니다. 난 그냥 다음 라인 3과 4를 상호 교환 문제입니다 고정 . 부트 스트랩 모듈 전에 --prod 모드를 활성화해야합니다.

이런 식으로 올바른 것을 넣을 수 있습니다.

enableProdMode()
platformBrowserDynamic().bootstrapModule(AppModule);

1
흥미롭게도, 나의 새로운 Angular 9 앱은이 줄들을 (이 순서대로!) 이미 "main.ts"파일에 넣은 것 같습니다. 지금은 기본값 인 것 같습니다.
Mike Gledhill

1

isDevMode()함수 의 반환 값을 확인하도록주의해야합니다 .

내가 존재를 확인했기 때문에 내 설치가 실패 하였다 if (isDevMode)된 항상 true, 심지어 생산에 내가 그것을 선언 때문이다 import { isDevMode } from '@angular/core';.

if (isDevMode())false올바르게 반환되었습니다 .


당신을 응용 프로그램 빌드하려고 ng build --prod=true통해 각 CLI
사티시 쿠마르 KK

if ( isDevMode )식별자 isDevMode 가 정의되어 있고 null이 아니고 비어 있거나 0이 아닌지 확인합니다. 식별자에 정의 된대로 @angular/core(가) 경우 항상 반환 사실 . 이제 if( isDevMode() )실제로 함수를 호출하고 개발 환경인지 여부를 반환합니다.
WPomier

1

환경 파일에 존재하는 생산 변수를 확인하기 만하면 생산 모드에서는 true이고 개발에서는 false입니다.

import { environment } from 'src/environments/environment';

if (environment.production) {
  // for production
} else {
  // for development
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.