wake-up-neo.com

So aktivieren Sie den Produktionsmodus in Angular 2

Ich bin neu bei Angular2, ich habe gelöste Fragen gelesen und dies gefunden

Angular2-Methodenbindungsfehler: "Wert hat sich nach der Überprüfung geändert"

das ist sehr interessant, aber meine Frage ist, wie ich von der Entwicklung zur Produktion wechseln kann. Nach dem Lesen dieser Frage gibt es Unterschiede

Was ist der Unterschied zwischen Produktion und Entwicklungsmodus in Angular2?

Ich habe gesucht, aber nichts gefunden, um darauf hinzuweisen, dass der Modus und wo Sie Modus (Entwicklung) oder Modus (Produktion) angeben müssen.

in der Konsole kann ich ....Call enableProdMode() to enable the production mode. sehen, aber wo in System.config({ oder in Komponentenklassen.

Gibt es einen spezifischen Import?

150
Angel Angel

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 es also nicht einfach verwerfen, sondern versuchen, herauszufinden, warum es passiert.

182
Sasxa

Dies funktionierte für mich 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

54
adampasz

Um den Produktionsmodus für eine Angular 2-Anwendung zu aktivieren, verwenden Sie angle-cli und erstellen die Anwendung mit ng build --prod. Dadurch wird die Anwendung mit dem Produktionsprofil erstellt. Die Verwendung von angle-cli hat den Vorteil, dass der Entwicklungsmodus während der Entwicklung mit ng serve oder ng build verwendet werden kann, ohne den Code ständig zu ändern. 

50
Matthias B

Wenn ich ein neues Projekt mit angle-cli erstellt habe. Es wurde eine Datei mit dem Namen environment.ts aufgenommen. In dieser Datei befindet sich eine Variable wie diese.

export const environment = {
  production: true
};

Dann in main.ts hast du das.

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 einem nicht-angle-cli-Projekt hinzufügen, würde ich davon ausgehen, dass enableProdMode () aus @ angle/core importiert wird.

38
howserss

Gehen Sie zu src/enviroments/enviroments.ts und aktivieren Sie den Produktionsmodus

export const environment = {
  production: true
};

für Angular 2

10

Um den Produktionsmodus in Winkel 6.X.X zu aktivieren, gehen Sie zur Umgebungsdatei

Wie dieser Weg

Ihr Pfad: project>\src\environments\environment.ts

production: false ändern von: 

export const environment = {
  production: false
};

Zu 

export const environment = {
  production: true
};

 enter image description here

6
Osama khodrog

Die meiste Zeit wird der Prod-Modus während der Entwicklungszeit nicht benötigt. Unsere Problemumgehung besteht also darin, es nur zu aktivieren, wenn es NICHT localhost ist. 

In main.ts Ihres Browsers definieren Sie Ihr Root-AppModule: 

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

Die Variable isLocal kann auch für andere Zwecke verwendet werden, z. B. enableTracing für die Variable RouterModule, um die Stapelverfolgung des Debuggings während der Entwicklungsphase zu verbessern.

5
Leon li

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

Wenn der Befehl ng build verwendet wird, wird standardmäßig die dev-Umgebung festgelegt

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

Dies aktiviert den Produktionsmodus und aktualisiert automatisch die Datei environment.ts

4
Waqas Saleem

Für diejenigen, die den Aktualisierungspfad ausführen, ohne ebenfalls zu TypeScript zu wechseln, verwenden Sie Folgendes:

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']);
3
Ryan Crews

Sie benötigen keine environment.ts oder eine solche Datei, die von Ihrem Seed-Projekt bereitgestellt wird. Nehmen Sie einfach eine configuration.ts auf und fügen Sie alle Einträge hinzu, für die eine Laufzeitentscheidung erforderlich ist (Beispiel: - Protokollierung von Konfiguration 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();
2
NitinSingh

sie können in Ihrem app.ts || verwenden main.ts-Datei

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

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

Mein Angular 2-Projekt hat nicht die "main.ts" -Datei, die andere Antworten enthält, aber es hat eine " boot.ts " -Datei, die scheinbar dasselbe ist. (Der Unterschied ist wahrscheinlich auf verschiedene Versionen von Angular zurückzuführen.)

Das Hinzufügen dieser beiden Zeilen nach der letzten import-Direktive in "boot.ts" funktionierte für mich:

import { enableProdMode } from "@angular/core";
enableProdMode();
0
Gyromite

In der Datei environment.ts wird die Produktion auf true gesetzt

export const environment = {
  production: true
};
0
Vinodh Ram

Angular-Apps werden standardmäßig im Entwicklungsmodus ausgeführt. Dies wird in der folgenden Meldung auf der Browserkonsole angezeigt:
Angular is running in the development mode. Call enableProdMode() to enable the production mode.

Durch das Umschalten in den Produktionsmodus kann die Ausführung beschleunigt werden, indem entwicklungsspezifische Überprüfungen wie die Erkennung von Doppeländerungen deaktiviert werden.

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

0
Tahir77667