publicar - subir proyecto angular a servidor

Cómo habilitar el modo de producción en Angular 2

Question

Soy nuevo en Angular2, estaba leyendo preguntas resueltas y encontré esto

Error de enlace del método Angular2: "el valor ha cambiado después de que se verificó"

lo cual es muy interesante, pero mi pregunta es cómo puedo cambiar del desarrollo a la producción, es que hay diferencias después de leer esta pregunta

¿Cuál es la diferencia entre el modo de producción y desarrollo en Angular2?

Busqué pero no encuentro nada que indique el modo, y dónde hay que indicar el modo (desarrollo) o el modo (producción).

en la consola puedo ver ....Call enableProdMode() to enable the production mode. pero donde en System.config({ o en las clases de componentes.

¿Se necesita una importación específica?

Answer 1

Cuando construí un nuevo proyecto usando angular-cli. Se incluyó un archivo llamado environment.ts. Dentro de este archivo hay una variable como esta.

export const environment = {
production: true
};

Luego, en main.ts tienes esto.

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

Podría suponer esto a un proyecto no angular-cli, supongo, porque enableProdMode () se está importando desde @ angular / core.

Answer 2

Cuando se usa el comando ng build, sobrescribe el archivo environment.ts

Por defecto, cuando se usa el comando ng build, establece el entorno de desarrollo

Para usar el entorno de producción, use el siguiente comando ng build --env = prod

Esto habilitará el modo de producción y actualizará automáticamente el archivo environment.ts

Answer 3

En el entorno.ts el archivo establece la producción en verdadero

export const environment = {
production: true
};

Answer 4

Esto funcionó para mí, utilizando la última versión de Angular 2 (2.0.0-rc.1):

main.ts

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

Aquí está la referencia de función de sus documentos: https://angular.io/api/core/enableProdMode

Answer 5

La mayoría de las veces el modo de producción no es necesario durante el tiempo de desarrollo. Entonces, nuestra solución es habilitarlo solo cuando NO sea localhost.

En main.ts su navegador donde define su AppModule raíz:

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

isLocal también se puede usar para otros fines, como enableTracing para RouterModule para mejorar la depuración del seguimiento de la pila durante la fase de desarrollo.

Answer 6

La mejor manera de habilitar el modo de producción para una aplicación Angular 2 es usar angular-cli y compilar la aplicación con ng build --prod . Esto construirá la aplicación con perfil de producción. El uso de angular-cli tiene la ventaja de poder usar el modo de desarrollo usando ng serve o ng build mientras se desarrolla sin alterar el código todo el tiempo.

Answer 7

Lo habilita importando y ejecutando la función (antes de llamar a bootstrap):

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

Pero este error es un indicador de que algo está mal con sus enlaces, por lo que no debe simplemente descartarlo, sino tratar de descubrir por qué está sucediendo.

Answer 8

Mi proyecto Angular 2 no tiene el archivo "main.ts" mencionado en otras respuestas, pero sí tiene un archivo " boot.ts ", que parece ser casi lo mismo. (La diferencia probablemente se deba a las diferentes versiones de Angular).

Agregar estas dos líneas después de la última directiva de import en "boot.ts" funcionó para mí:

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

Answer 9

No necesita ningún entorno.ts o tal archivo para ser proporcionado por su proyecto semilla. Solo tenga un archivo configuration.ts y agregue todas las entradas que requieran una decisión de tiempo de ejecución (ejemplo: configuración de registro y URL). Esto encajará en cualquier estructura de diseño y también ayudará en el futuro

configuration.ts

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

// Ahora use en su código de inicio (main.ts o equivalente según el diseño del proyecto semilla

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

Answer 10

Para aquellos que realizan la ruta de actualización sin cambiar también a TypeScript, use:

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

Para mí (en javascript) esto se ve así:

export class Configuration {
isInProductionMode : bool = true;
// other configuration
serviceUrl : string = "http://myserver/myservice.svc";
logFileName : string = "...";
}

Answer 11

Para habilitar el modo de producción en angular 6.XX Simplemente vaya al archivo de entorno

Como este camino

Su ruta: project>/src/environments/environment.ts

Cambiar production: false de:

export const environment = {
production: false
};

A

export const environment = {
production: true
};

Answer 12

Vaya a src/enviroments/enviroments.ts y active el modo de producción.

export const environment = {
production: true
};

para Angular 2

Answer 13

ng build --prod reemplaza environment.ts con environment.prod.ts ng build --prod

Answer 14

puedes usar en tu app.ts || archivo main.ts

ng.core.enableProdMode()