Jak włączyć tryb produkcyjny?

Czytałem powiązane pytania i znalazłem to , ale moje pytanie brzmi: jak mogę przejść z trybu programowania do trybu produkcji. Istnieją pewne różnice między trybami, które są tutaj wskazane .

W konsoli widzę ....Call enableProdMode() to enable the production mode.Jednak nie jestem pewien, jakiego typu powinienem wywołać tę metodę.

Czy ktoś może odpowiedzieć na to pytanie?

Włączysz go, importując i wykonując funkcję (przed wywołaniem bootstrap):

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

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

Ale ten błąd wskazuje, że coś jest nie tak z twoimi powiązaniami, więc nie powinieneś po prostu go odrzucać, ale spróbuj dowiedzieć się, dlaczego tak się dzieje.

Najlepszym sposobem na włączenie trybu produkcyjnego dla aplikacji Angular 2 jest użycie angular-cli i zbudowanie aplikacji ng build --prod. Spowoduje to zbudowanie aplikacji z profilem produkcyjnym. Korzystanie z angular-cli ma tę zaletę, że może korzystać z trybu programowania przy użyciu ng servelub ng buildpodczas programowania bez zmiany kodu przez cały czas.

Działa to dla mnie przy użyciu najnowszej wersji Angular 2 (2.0.0-rc.1):

main.ts

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

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

Oto odniesienie do funkcji z ich dokumentów: https://angular.io/api/core/enableProdMode

Kiedy zbudowałem nowy projekt za pomocą angular-cli. Dołączono plik o nazwie environment.ts. Wewnątrz tego pliku jest taka zmienna.

export const environment = {
  production: true
};

Następnie w main.ts masz to.

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

Zakładam, że można dodać to do projektu nie angular-cli, ponieważ importProdMode () jest importowany z @ angular / core.

Przejdź do src/enviroments/enviroments.tsi włącz tryb produkcyjny

export const environment = {
  production: true
};

dla Angular 2

Aby włączyć tryb produkcyjny w wersji kątowej 6.XX Wystarczy przejść do pliku środowiska

Podoba mi się ta ścieżka

Twoja ścieżka: project>\src\environments\environment.ts

Zmień production: falsez:

export const environment = {
  production: false
};

Do

export const environment = {
  production: true
};

W większości przypadków tryb prod nie jest potrzebny podczas programowania. Dlatego naszym obejściem jest włączenie go tylko wtedy, gdy NIE jest to host lokalny.

W przeglądarkach, w main.tsktórych definiujesz swój główny moduł AppModule:

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

isLocalMogą być również wykorzystywane do innych celów, takich jak enableTracingdla RouterModuledla lepszego debugowania ślad stosu podczas dev fazie.

Gdy używana jest komenda ng build, zastępuje plik environment.ts

Domyślnie, gdy używana jest komenda ng build, ustawia środowisko programistyczne

Aby korzystać ze środowiska produkcyjnego, użyj następującego polecenia ng build --env = prod

Umożliwi to tryb produkcji i automatycznie zaktualizuje plik environment.ts

możesz użyć w app.ts || plik main.ts

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

Osoby wykonujące ścieżkę aktualizacji bez przełączania się na TypeScript:

ng.core.enableProdMode()

Dla mnie (w javascript) wygląda to następująco:

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

Nie potrzebujesz żadnego pliku environment.ts ani takiego pliku, który dostarczy Twój projekt początkowy. Wystarczy mieć plik configuration.ts i dodać wszystkie takie wpisy, które wymagają decyzji środowiska wykonawczego (przykład: - rejestrowanie konfiguracji i adresów URL). Będzie to pasować do dowolnej struktury projektu, a także pomoże w przyszłości

Configuration.ts

export class Configuration {

   isInProductionMode : bool = true;

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

// Teraz użyj w kodzie startowym (main.ts lub równoważny zgodnie z projektem projektu początkowego

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

W pliku environment.ts produkcja zestawu ma wartość true

export const environment = {
  production: true
};

ng build --prod zamienia environment.ts na environment.prod.ts

ng build --prod

Mój projekt Angular 2 nie ma pliku „main.ts” wspomnianego w innych odpowiedziach, ale ma plik „ boot.ts ”, który wydaje się być podobny. (Różnica wynika prawdopodobnie z różnych wersji Angulara).

Dodanie tych dwóch wierszy po ostatniej importdyrektywie w „boot.ts” działało dla mnie:

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