Wie aktiviere ich den Produktionsmodus?

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?

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.

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.

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

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.

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

export const environment = {
  production: true
};

für Winkel 2

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

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.

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

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

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

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

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

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

export const environment = {
  production: true
};

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

ng build --prod

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