Wie aktiviere ich den Produktionsmodus?

182

Ich habe verwandte Fragen gelesen und diese gefunden , aber meine Frage ist, wie ich vom Entwicklungs- zum Produktionsmodus wechseln kann. Es gibt einige Unterschiede zwischen den Modi, auf die hier hingewiesen wird .

In der Konsole kann ich sehen ....Call enableProdMode() to enable the production mode.. Ich bin mir jedoch nicht sicher, für welchen Typ ich diese Methode aufrufen soll.

Kann jemand diese Frage beantworten?

Engel Engel
quelle
Ich fand es verrückt, die Konfiguration mit Webpack 2+ Angular2 und Typescript zu übergeben und eine einfache Lösung zu erstellen: github.com/Sweetog/yet-another-angular2-boilerplate
Brian Ogden

Antworten:

211

Sie aktivieren es, indem Sie die Funktion importieren und ausführen (bevor Sie bootstrap aufrufen):

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

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

Dieser Fehler ist jedoch ein Hinweis darauf, dass etwas mit Ihren Bindungen nicht stimmt. Sie sollten ihn also nicht einfach schließen, sondern herausfinden, warum dies geschieht.

Sasxa
quelle
Wie aktiviere ichProdMode (), wenn Sie kein Typoskript verwenden? Wenn ich diese Methode nur vor ng.platform.browser.bootstrap (...) aufrufe, wird folgende Fehlermeldung angezeigt: enableProdMode ist nicht definiert
Daniel Dudas
2
@ DanielDudas Ich benutze es5 nicht, aber versuche esng.core.enableProdMode()
Sasxa
3
Ich glaube, "angle2 / core" ist jetzt "@ angle / core". Siehe meine Antwort unten.
Adampasz
Ich benutze Ionic2. In welcher Datei heißt dieser Bootstrap? Wenn ich eine Beispiel-App generiere, ionic start test sidemenu --v2 --tssehe ich, app.tsaber wo heißt diese Bootstrap-Funktion?
Guus
1
Ich habe das Gleiche getan, erhalte jedoch eine Ausnahme wie "Prod-Modus kann nach Plattform-Setup nicht aktiviert werden". Könnte mir jemand helfen, dieses Problem zu lösen?
Gowtham
81

Der beste Weg, um den Produktionsmodus für eine Angular 2-Anwendung zu aktivieren, besteht darin, angle-cli zu verwenden und die Anwendung mit zu erstellen ng build --prod. Dadurch wird die Anwendung mit dem Produktionsprofil erstellt. Die Verwendung von angle-cli hat den Vorteil, dass der Entwicklungsmodus mithilfe ng serveoder ng buildwährend der Entwicklung verwendet werden kann, ohne dass der Code ständig geändert wird.

Matthias B.
quelle
6
Ich benutze Angular 6 und es ist ng build --prod, um im Prod-Modus zu bauen. Stellen Sie dies einfach hier für alle Neulinge, die diese Seite besuchen.
Ausführliche
Ich denke, dass build --prod unter Berücksichtigung von isDevMode und enableProdMode implementiert wurde. Diese Antwort sollte als Antwort markiert werden
bubi
58

Dies funktionierte bei mir mit der neuesten Version von Angular 2 (2.0.0-rc.1):

main.ts

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

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

Hier ist die Funktionsreferenz aus ihren Dokumenten: https://angular.io/api/core/enableProdMode

adampasz
quelle
1
@emp Ich bin überrascht, dass die offizielle Angular-Dokumentation enableProdModeIhnen nicht sagt, wo Sie sie nennen sollen.
Dai
53

Als ich ein neues Projekt mit Angular-Cli erstellt habe. Eine Datei namens environment.ts wurde hinzugefügt. In dieser Datei befindet sich eine solche Variable.

export const environment = {
  production: true
};

Dann haben Sie in main.ts dies.

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);

Sie könnten dies zu einem Nicht-Angular-Cli-Projekt hinzufügen, da enableProdMode () aus @ angle / core importiert wird.

howserss
quelle
Wie funktioniert das für Nicht-Produkt-Builds? Ich gehe davon aus, dass in diesem Fall environment.ts ignoriert wird. Erhalten Sie also keinen tsc-Kompilierungsfehler, wenn Sie versuchen, das Modul zu importieren?
Lasarov
@llasarov Die Umgebung.ts verhält sich wie eine Konfigurationsdatei, in der Sie den Produktionsmodus aktivieren / deaktivieren können. Die Datei main.ts ruft nur den enableProdMode auf, wenn er wahr ist. Dies kann also ohne einen bestimmten Erstellungsprozess erfolgen. Sie können hier auch die Protokollierung auswählen, indem Sie überprüfen, ob der logMode debuggt. Dann führt Ihr benutzerdefinierter Protokollierungsdienst eine detaillierte StackTrace durch, andernfalls protokolliert er nur einen
Einzeiler
13

Gehen Sie zu src/enviroments/enviroments.tsund aktivieren Sie den Produktionsmodus

export const environment = {
  production: true
};

für Winkel 2

Alexander Schmidt
quelle
10

So aktivieren Sie den Produktionsmodus in Angle 6.XX Gehen Sie einfach zur Umgebungsdatei

Wie dieser Weg

Dein Weg: project>\src\environments\environment.ts

Wechsel production: falsevon:

export const environment = {
  production: false
};

Zu

export const environment = {
  production: true
};

Geben Sie hier die Bildbeschreibung ein

Osama Khodrog
quelle
8

Meistens wird der Prod-Modus während der Entwicklungszeit nicht benötigt. Daher besteht unsere Problemumgehung darin, es nur zu aktivieren, wenn es NICHT localhost ist.

In Ihren Browsern, in main.tsdenen Sie Ihr Root-AppModule definieren:

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

Das isLocalkann auch für andere Zwecke verwendet werden , wie enableTracingfür die RouterModulebessere Debug - Stack - Trace während dev Phase.

LeOn - Han Li
quelle
6

Wenn der Befehl ng build verwendet wird, überschreibt er die Datei environment.ts

Wenn der Befehl ng build verwendet wird, wird standardmäßig die Entwicklungsumgebung festgelegt

Verwenden Sie den folgenden Befehl ng build --env = prod, um die Produktionsumgebung zu verwenden

Dadurch wird der Produktionsmodus aktiviert und die Datei environment.ts automatisch aktualisiert

Waqas Saleem
quelle
1
Dies wurde in Angular CLI 6 in geändert ng build --configuration=production(standardmäßig unter Verwendung der von der CLI generierten Datei angle.json).
Slasky
5

Sie können in Ihren app.ts || verwenden main.ts Datei

import {enableProdMode} from '@angular/core';
enableProdMode();
bootstrap(....);
Samudrala Ramu
quelle
4

Für diejenigen, die den Upgrade-Pfad ausführen, ohne auch zu TypeScript zu wechseln, verwenden Sie:

ng.core.enableProdMode()

Für mich (in Javascript) sieht das so aus:

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

Sie benötigen keine environment.ts oder eine solche Datei, die von Ihrem Seed-Projekt bereitgestellt wird. Haben Sie einfach eine configuration.ts und fügen Sie alle Einträge hinzu, für die eine Laufzeitentscheidung erforderlich ist (Beispiel: - Protokollierungskonfiguration und URLs). Dies passt in jede Designstruktur und hilft auch in Zukunft

configuration.ts

export class Configuration {

   isInProductionMode : bool = true;

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

// Jetzt in Ihrem Startcode verwenden (main.ts oder gleichwertig gemäß dem Seed-Projektdesign

import { Configuration } from './configuration';
import { enableProdMode } from '@angular/core';
....
if (Configuration.isInProductionMode)
    enableProdMode();
NitinSingh
quelle
1
Wie unterscheidet man prod / dev davon isInProductionModeals wahr / falsch? in der Bauzeit?
LeOn - Han Li
Normalerweise als GULP-Parameter oder Äquivalent
NitinSingh
Der JSON hat folgenden Eintrag: - "environmentSource": "Umgebungen / Umgebung.ts", "Umgebungen": {"dev": "Umgebungen / Umgebung.ts", "Produkt": "Umgebungen / Umgebung.prod.ts" }
NitinSingh
4

Setzen Sie in der Datei environment.ts die Produktion auf true

export const environment = {
  production: true
};
Vinodh Ram
quelle
Wirklich EZ: P TY für ...!
Carlos Galeano
4

ng build --prod ersetzt environment.ts durch environment.prod.ts

ng build --prod

Mahmoudi MohamedAmine
quelle
0

In meinem Angular 2-Projekt gibt es in der Datei "main.ts" keine anderen Antworten, aber in der Datei " boot.ts ", die ungefähr dasselbe zu sein scheint. (Der Unterschied ist wahrscheinlich auf verschiedene Versionen von Angular zurückzuführen.)

Das Hinzufügen dieser beiden Zeilen nach der letzten importAnweisung in "boot.ts" hat bei mir funktioniert:

import { enableProdMode } from "@angular/core";
enableProdMode();
Gyromit
quelle