Wie Produktionsmodus in Angular 2

Question

Ich bin neu in Angular2, ich las aufgelöst Fragen und ich fand diese

Angular2 method binding error: "value has changed after it was checked"

was sehr interessant ist, aber meine Frage ist damit, wie kann ich von ändern Entwicklung bis zur Produktion, ist es, dass es Unterschiede nach dieser Frage

What is difference between production and development mode in Angular2?

ich suchte gelesen hat, aber finde nichts, dass die aktuelle Einstellung anzuzeigen, und wo Sie Modus anzuzeigen (Entwicklung) oder Modus (Produktion).

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

Ist ein spezifischer Import erforderlich?

Answer 1

Sie ermöglichen es durch den Import und Ausführen der Funktion (vor Bootstrap-Aufruf):

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

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

Aber dieser Fehler ist Indikator dafür, dass etwas mit Ihren Bindungen falsch ist, so sollten Sie es nicht nur entlassen, sondern versuchen, um herauszufinden, warum es passiert.

Answer 2

Dieser arbeitete für mich, die neueste Version von Angular 2 unter Verwendung von (2.0.0-rc.1):

main.ts

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

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

Hier ist die Funktionsreferenz von ihrem docs : https://angular.io/api/core/enableProdMode

Answer 3

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

Answer 4

Als ich ein neues Projekt mit eckigen-Cli erstellt. Eine Datei namens environment.ts wurde hinzugefügt. Innerhalb dieser Datei befindet sich eine Variable wie diese.

export const environment = { 
    production: true 
}; 

Dann in main.ts haben Sie diese.

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 dies zu einem nicht kantig-cli Projekt hinzufügen könnten, würde ich annehmen, weil enableProdMode() von @ Winkel/Kern importiert wird.

Answer 5

Für diejenigen, die Upgrade-Pfad zu tun, ohne auch Typoskript Verwendung Schalt:

ng.core.enableProdMode() 

für mich (in Javascript) das wie folgt aussieht:

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

Answer 6

Mein Angular 2 Projekt keinen die Datei "main.ts" erwähnte andere Antworten, aber sie hat einen "Boot".ts "Datei, die in etwa gleich zu sein scheint. (Der Unterschied ist wahrscheinlich aufgrund verschiedener Versionen von Angular.)

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

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

Answer 7

zum src/enviroments/enviroments.ts und ermöglichen die Herstellung Modus

export const environment = { 
    production: true 
}; 

für Angular 2

Answer 8

Sie benötigen keine environment.ts oder solche Dateien, die von Ihrem Seed-Projekt bereitgestellt werden. Habe einfach eine configuration.ts und füge alle Einträge hinzu, die eine Laufzeitentscheidung erfordern (Beispiel: - Protokollierung der Konfiguration und URLs). Dies wird in jeder Design-Struktur passen und auch in Zukunft

configuration.ts helfen

export class Configuration { 

    isInProductionMode : bool = true; 

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

// Jetzt in Ihrem Startcode (main.ts oder gleichwertig gemäß dem Saatgutprojekt Design verwenden

import { Configuration } from './configuration'; 
import { enableProdMode } from '@angular/core'; 
.... 
if (Configuration.isInProductionMode) 
    enableProdMode(); 

Answer 9

die meiste Zeit prod Modus nicht während der Entwicklungszeit benötigt wird. So ist unsere Problemumgehung es nur zu aktivieren, wenn es nICHT localhost ist.

In Ihrem Browser main.ts, wo Sie Ihre Wurzel AppModule definieren:

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

Die isLocal kann auch für andere Zwecke wie enableTracing für die RouterModule für eine bessere Debug-Stack-Trace während dev Phase verwendet werden.

Answer 10

Wenn Befehl ng bauen wird es environment.ts

standardmäßig Datei überschreiben, wenn Befehl ng bauen wird es dev Umgebung

Um zu verwenden, Produktionsumgebung, verwenden folgenden Befehl ng build-Set - -env = prod

Dies wird den Produktionsmodus aktivieren und automatisch environment.ts Datei