Como habilitar o modo de produção?

Eu estava lendo perguntas relacionadas e encontrei essa , mas minha pergunta é como alternar do modo de desenvolvimento para o modo de produção. Existem algumas diferenças entre os modos que são apontados aqui .

No console, eu posso ver. ....Call enableProdMode() to enable the production mode.No entanto, não tenho certeza de qual instância devo chamar esse método.

Alguém pode responder a esta pergunta?

Você o habilita importando e executando a função (antes de chamar o bootstrap):

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

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

Mas esse erro é um indicador de que algo está errado com suas ligações, então você não deve apenas descartá-lo, mas tentar descobrir por que isso está acontecendo.

A melhor maneira de ativar o modo de produção para um aplicativo Angular 2 é usar o angular-cli e criar o aplicativo ng build --prod. Isso criará o aplicativo com perfil de produção. O uso do angular-cli tem o benefício de poder usar o modo de desenvolvimento usando ng serveou ng builddurante o desenvolvimento sem alterar o código o tempo todo.

Isso funcionou para mim, usando a versão mais recente do Angular 2 (2.0.0-rc.1):

main.ts

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

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

Aqui está a referência de função de seus documentos: https://angular.io/api/core/enableProdMode

Quando construí um novo projeto usando o angular-cli. Foi incluído um arquivo chamado environment.ts. Dentro deste arquivo há uma variável assim.

export const environment = {
  production: true
};

Então em main.ts você tem isso.

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

Você poderia adicionar isso a um projeto não angular-cli, eu diria, porque enableProdMode () está sendo importado de @ angular / core.

Vá para src/enviroments/enviroments.tse ative o modo de produção

export const environment = {
  production: true
};

para Angular 2

Para ativar o modo de produção no angular 6.XX, basta ir para o arquivo de ambiente

Como este caminho

Seu caminho: project>\src\environments\environment.ts

Alterar production: falsede:

export const environment = {
  production: false
};

Para

export const environment = {
  production: true
};

Na maioria das vezes, o modo prod não é necessário durante o tempo de desenvolvimento. Portanto, nossa solução alternativa é ativá-lo apenas quando NÃO for localhost.

Nos navegadores, main.tsonde você define seu AppModule raiz:

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

Também isLocalpode ser usado para outros fins, como enableTracingpara o RouterModulemelhor rastreamento da pilha de depuração durante a fase dev.

Quando o comando ng build é usado, ele substitui o arquivo environment.ts

Por padrão, quando o comando ng build é usado, ele define o ambiente de desenvolvimento

Para usar o ambiente de produção, use o seguinte comando ng build --env = prod

Isso ativará o modo de produção e atualizará automaticamente o arquivo environment.ts

você pode usar no seu app.ts || arquivo main.ts

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

No arquivo environment.ts, defina a produção como true

export const environment = {
  production: true
};

Para aqueles que fazem o caminho de atualização sem também mudar para o TypeScript, use:

ng.core.enableProdMode()

Para mim (em javascript), isso se parece com:

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

Você não precisa que nenhum arquivo environment.ts ou esse arquivo seja fornecido pelo seu projeto inicial. Basta ter um configuration.ts e adicionar todas as entradas que requerem decisão de tempo de execução (exemplo: - configuração de log e URLs). Isso caberá em qualquer estrutura de design e também ajudará no futuro

configuration.ts

export class Configuration {

   isInProductionMode : bool = true;

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

// Agora use no seu código de inicialização (main.ts ou equivalente, conforme o design do projeto inicial)

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

ng build --prod substitui environment.ts por environment.prod.ts

ng build --prod

Meu projeto Angular 2 não tem o arquivo "main.ts" mencionado outras respostas, mas possui um arquivo " boot.ts ", que parece ser a mesma coisa. (A diferença provavelmente se deve a diferentes versões do Angular.)

Adicionar essas duas linhas após a última importdiretiva em "boot.ts" funcionou para mim:

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