So überprüfen Sie, ob die Angular-Anwendung im Produktions- oder Entwicklungsmodus ausgeführt wird

131

Dies scheint einfach zu sein, aber ich konnte keine Lösung finden.

Wie überprüfe ich, ob meine App im Produktionsmodus oder im Entwicklungsmodus ausgeführt wird?

maxbellec
quelle

Antworten:

198

Sie können diese Funktion isDevMode verwenden

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

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

Ein Hinweis : Seien Sie vorsichtig mit dieser Funktion

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

Sie erhalten

Fehler: Der Prod-Modus kann nach dem Einrichten der Plattform nicht aktiviert werden

Andere Optionen

Umgebungsvariable

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

if (environment.production) {
  //
}

injiziert durch die Variable webpack process.env.NODE_ENV

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

if (env  === 'production') {
  //
}
Yurzui
quelle
Ich erhalte den gleichen Fehler, den Sie erwähnt haben. "Prod-Modus kann nach Plattform-Setup nicht aktiviert werden". Könnten Sie mir bitte helfen, dieses Problem zu lösen? @yurzui
Gowtham
@ Gowtham Sie müssen es aktivieren, bevor Sie anrufenplatformBrowserDynamic().bootstrapModule(AppModule);
Yurzui
Genau so nenne ich es. Trotzdem wird dieser Fehler jedes Mal angezeigt, wenn ich versuche, die App im Produktionsmodus @yurzui auszuführen. Jede Hilfe bei der Lösung dieses Problems wäre sehr dankbar. Danke
Gowtham
@ Gowtham Haben Sie ein Beispiel, um es zu reproduzieren?
Yurzui
2
angle.io/api/core/isDevMode "Nach einmaligem Aufruf ist der Wert gesperrt und ändert sich nicht mehr." Die Antwort sollte das Dokument und diese Warnung enthalten!
Jason
38

Gemäß dem Angular Deployment-Handbuch unter https://angular.io/guide/deployment#enable-production-mode :

Das Erstellen für die Produktion (oder das Anhängen des Flags --environment = prod) aktiviert den Produktionsmodus. Sehen Sie sich die generierte CLI an, um main.tszu sehen, wie dies funktioniert.

main.ts hat folgendes:

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

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

Überprüfen Sie also environment.production, ob Sie in Produktion sind.

Höchstwahrscheinlich möchten Sie NICHT anrufen isDevMode(). Gemäß der Angular API-Dokumentation unter https://angular.io/api/core/isDevMode :

Nach einmaligem Aufruf ist der Wert gesperrt und ändert sich nicht mehr ... Standardmäßig ist dies der Fall, es sei denn, ein Benutzer ruft enableProdMode auf, bevor er dies aufruft.

Ich habe festgestellt, dass das Aufrufen isDevMode()von einem ng build --prodBuild immer true zurückgibt und Sie immer daran hindert, im Dev-Modus zu laufen. Überprüfen environment.productionSie stattdessen, ob Sie in Produktion sind. Dann bleiben Sie im Produktionsmodus.

Ron DeSantis
quelle
2
Dies sollte die akzeptierte Antwort sein. (Richtige Verknüpfung und Erklärungen des
Dokuments
1
Die Tatsache, dass sich der Wert nicht ändert, bedeutet nicht, dass Sie ihn nicht aufrufen möchten. Sie sollten nicht vom Dev-Modus in den Prod-Modus und zurück wechseln, während Ihre Anwendung ausgeführt wird. Wenn Sie also herausfinden möchten, ob Sie den Produktionsmodus aktivieren sollen, ist die Umgebungsvariable der richtige Weg. Wenn Sie jedoch einen Dienst haben, der sich im Entwicklungsmodus etwas anders verhalten muss, isDevMode()ist dies ein perfekter Weg Das.
StriplingWarrior
4

es hängt davon ab, was Sie fragen ...

Wenn Sie modeAngular kennenlernen möchten , wie @yurzui sagte, müssen Sie anrufen, { isDevMode } from @angular/coreaber es kann falsenur zurückkehren, wenn Sie enableProdModevorher anrufen .

Wenn Sie die Build-Umgebung kennenlernen möchten, dh wenn Ihre App minimiert ausgeführt wird oder nicht, müssen Sie eine Build-Variable in Ihrem Build-System festlegen ... Verwenden WebpackSie beispielsweise einen Blick darauf definePlugin.

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

new webpack.DefinePlugin({
  ENV_PRODUCTION: !!process.env.NODE_ENV
});
Hitmands
quelle
Ich habe eigentlich nach beidem gesucht. Ich verwende Webpack (über das Angular-Cli). Wo füge ich Ihre Codezeilen hinzu? Wie kann ich in meinen Typoskriptdateien auf diese Variable zugreifen? Ich wäre großartig, wenn Sie Ihre Antwort damit aktualisieren könnten
maxbellec
Im Anschluss an diese ngcli.github.io/#getting-started-project-structure sollten Sie die webpack.config.js bearbeiten und dann dem Link in meiner Antwort folgen ...
Hitmands
Der Link in Ihrem Beitrag ist veraltet, hier ist der richtige für das 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();

Dies war mein Code, daher habe ich den gleichen Fehler erhalten. Ich habe gerade Zeile 3 und 4 vertauscht. Dann ist das Problem behoben . Vor dem Bootstrapping-Modul sollten wir also den --prod-Modus aktivieren.

Das richtige kann auf diese Weise gesetzt werden,

enableProdMode()
platformBrowserDynamic().bootstrapModule(AppModule);
DEEPAN KUMAR
quelle
1
Interessanterweise scheint meine neue Angular 9-App diese Zeilen (in dieser Reihenfolge!) Bereits in meine "main.ts" -Datei eingefügt zu haben. Es scheint jetzt die Standardeinstellung zu sein.
Mike Gledhill
1

Sie sollten darauf achten, dass Sie den Rückgabewert der isDevMode()Funktion überprüfen .

Mein Setup schlug fehl, weil ich nach Existenz suchte: if (isDevMode)war immer true, sogar in der Produktion, weil ich es mit deklariert habe import { isDevMode } from '@angular/core';.

if (isDevMode())zurück falserichtig.

Spikolynn
quelle
Versuchen Sie, ng build --prod=true
Sathish Kumar kk
if ( isDevMode )Überprüft nur, ob der Bezeichner isDevMode definiert ist, nicht null und weder leer noch null. Wie der Bezeichner darin definiert wurde @angular/core, gibt if () immer true zurück . Jetzt if( isDevMode() )wird die Funktion tatsächlich aufgerufen und es wird zurückgegeben, ob es sich um eine Entwicklungsumgebung handelt oder nicht.
WPomier
1

Überprüfen Sie einfach die in der Umgebungsdatei vorhandene Produktionsvariable. Sie ist für den Produktionsmodus wahr und für die Entwicklung falsch.

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

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