Cara memeriksa apakah aplikasi Angular berjalan dalam mode Produksi atau Pengembangan

131

Ini sepertinya mudah, tetapi saya tidak dapat menemukan solusi.

Jadi, bagaimana cara memeriksa apakah aplikasi saya berjalan dalam mode produksi atau mode dev?

maxbellec
sumber

Jawaban:

198

Anda dapat menggunakan fungsi ini isDevMode

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

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

Satu catatan : hati - hati dengan fungsi ini

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

Kamu akan mendapatkan

Kesalahan: Tidak dapat mengaktifkan mode prod setelah pengaturan platform

Pilihan lain

variabel lingkungan

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

if (environment.production) {
  //
}

disuntikkan oleh variabel webpack process.env.NODE_ENV

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

if (env  === 'production') {
  //
}
yurzui
sumber
Saya mendapatkan kesalahan yang sama seperti yang Anda sebutkan. + Msgstr "Tidak dapat mengaktifkan mode prod setelah pengaturan platform". Bisakah Anda membantu saya menyelesaikan masalah ini? @yurzui
Gowtham
@Gowtham Anda harus mengaktifkannya sebelum memanggilplatformBrowserDynamic().bootstrapModule(AppModule);
yurzui
Persis seperti itulah saya menyebutnya. Tetap saya mendapatkan kesalahan ini setiap kali saya mencoba menjalankan aplikasi dalam mode produksi @ yurzui. Bantuan apa pun untuk menyelesaikan ini akan sangat dihargai. Terima kasih
Gowtham
@ Gowtham Apakah Anda punya contoh untuk memperbanyaknya?
yurzui
2
angular.io/api/core/isDevMode "Setelah dipanggil sekali, nilainya dikunci dan tidak akan berubah lagi." Jawabannya harus mencakup dokumen dan peringatan ini!
jasie
38

Per panduan Penerapan Angular di https://angular.io/guide/deployment#enable-production-mode :

Membangun untuk produksi (atau menambahkan flag --environment = prod) memungkinkan mode produksi Lihatlah CLI yang dihasilkan main.tsuntuk melihat bagaimana ini bekerja.

main.ts memiliki yang berikut:

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

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

Jadi periksa environment.productionuntuk melihat apakah Anda sedang dalam produksi.

Kemungkinan besar Anda TIDAK ingin menelepon isDevMode(). Per dokumentasi API Sudut di https://angular.io/api/core/isDevMode :

Setelah dipanggil sekali, nilainya dikunci dan tidak akan berubah lagi ... Secara default, ini benar, kecuali jika pengguna memanggil enableProdMode sebelum memanggil ini.

Saya telah menemukan bahwa memanggil isDevMode()dari ng build --prodbuild selalu mengembalikan true dan selalu mengunci Anda agar berjalan dalam mode dev. Sebagai gantinya, periksa environment.productionuntuk melihat apakah Anda sedang dalam produksi. Maka Anda akan tetap dalam mode produksi.

Ron DeSantis
sumber
2
Ini harus menjadi jawaban yang diterima. (Tautan dokumen dan penjelasan yang tepat.)
jasie
1
Fakta bahwa nilainya tidak akan berubah tidak menyiratkan bahwa Anda tidak ingin menyebutnya. Anda seharusnya tidak beralih dari mode dev ke mode prod dan kembali saat aplikasi Anda sedang berjalan. Jadi ketika Anda mencoba menentukan apakah Anda harus mengaktifkan mode produksi, variabel lingkungan adalah cara yang tepat, tetapi jika Anda memiliki layanan yang perlu berperilaku sedikit berbeda ketika dalam mode dev, isDevMode()adalah cara yang sangat baik untuk mencapai bahwa.
StriplingWarrior
4

itu tergantung pada apa yang Anda tanyakan ...

Jika Anda ingin mengetahui modeAngular, seperti yang dikatakan @yurzui, Anda perlu menelepon { isDevMode } from @angular/coretetapi itu falsehanya akan kembali jika Anda menelepon enableProdModesebelumnya.

Jika Anda ingin mengetahui lingkungan build , dengan kata lain, jika aplikasi Anda berjalan minimal atau tidak, Anda perlu menetapkan variabel build di sistem build Anda ... Menggunakan Webpack, misalnya, Anda harus melihatnya definePlugin.

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

new webpack.DefinePlugin({
  ENV_PRODUCTION: !!process.env.NODE_ENV
});
Hitmands
sumber
Saya sebenarnya mencari keduanya. Saya menggunakan webpack (melalui angular-cli), di mana saya dapat menambahkan baris kode Anda? Bagaimana saya memiliki akses ke variabel itu dalam file naskah saya? Saya akan sangat senang jika Anda dapat memperbarui jawaban Anda dengan itu
maxbellec
Mengikuti ngcli.github.io/#getting-started-project-structure ini Anda harus mengedit webpack.config.js kemudian ikuti tautan dalam jawaban saya ...
Hitmands
Tautan di pos Anda sudah kedaluwarsa, ini yang benar untuk Define Plugin
HostMyBus
2
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module'


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

Ini kode saya, jadi saya mendapat kesalahan yang sama. Saya baru saja menukar baris 3 dan 4. Kemudian masalah diperbaiki . Jadi sebelum modul bootstrap kita harus mengaktifkan mode --prod.

Yang benar bisa dimasukkan dengan cara ini,

enableProdMode()
platformBrowserDynamic().bootstrapModule(AppModule);
DEEPAN KUMAR
sumber
1
Menariknya, aplikasi Angular 9 baru saya tampaknya telah memasukkan baris-baris ini (dalam urutan ini!) Ke dalam file "main.ts" saya. Tampaknya menjadi default sekarang.
Mike Gledhill
1

Anda harus berhati-hati bahwa Anda memeriksa nilai balik isDevMode()fungsi.

Pengaturan saya gagal karena saya memeriksa keberadaan: if (isDevMode)selalu true, bahkan dalam produksi karena saya menyatakannya dengan import { isDevMode } from '@angular/core';.

if (isDevMode())dikembalikan falsedengan benar.

Spikolynn
sumber
cobalah untuk membangun aplikasi Anda dengan ng build --prod=truemelalui sudut sudut
Sathish Kumar kk
if ( isDevMode )hanya memeriksa jika identifier isDevMode didefinisikan, bukan nol, dan tidak kosong atau nol. Sebagai pengidentifikasi didefinisikan @angular/corebahwa if () akan selalu mengembalikan true . Sekarang, if( isDevMode() )sebenarnya akan memanggil fungsi dan itu akan kembali jika itu lingkungan pengembangan atau tidak.
WPomier
1

Cukup periksa variabel produksi yang ada di file lingkungan, itu akan benar untuk mode produksi dan salah untuk pengembangan.

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

if (environment.production) {
  // for production
} else {
  // for development
}
Jasmeet Singh
sumber