Comment activer le mode production?

Je lisais des questions connexes et j'ai trouvé celle-ci , mais ma question est de savoir comment passer du mode développement au mode production. Il existe quelques différences entre les modes qui sont indiqués ici .

Dans la console, je peux voir ....Call enableProdMode() to enable the production mode.Cependant, je ne suis pas sûr de quel type dois-je appeler cette méthode.

Quelqu'un peut-il répondre à cette question?

Vous l'activez en important et en exécutant la fonction (avant d'appeler bootstrap):

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

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

Mais cette erreur indique que quelque chose ne va pas avec vos liaisons, vous ne devriez donc pas simplement l'ignorer, mais essayer de comprendre pourquoi cela se produit.

La meilleure façon d'activer le mode production pour une application Angular 2 est d'utiliser angular-cli et à créer l'application avec ng build --prod. Cela créera l'application avec un profil de production. L'utilisation d'angular-cli a l'avantage de pouvoir utiliser le mode de développement en utilisant ng serveou ng buildpendant le développement sans modifier le code en permanence.

Cela a fonctionné pour moi, en utilisant la dernière version d'Angular 2 (2.0.0-rc.1):

main.ts

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

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

Voici la référence de la fonction tirée de leur documentation: https://angular.io/api/core/enableProdMode

Quand j'ai construit un nouveau projet en utilisant angular-cli. Un fichier a été inclus appelé environment.ts. À l'intérieur de ce fichier se trouve une variable comme celle-ci.

export const environment = {
  production: true
};

Ensuite, dans main.ts, vous avez ceci.

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

Vous pouvez l'ajouter à un projet non angular-cli, je suppose, car enableProdMode () est importé depuis @ angular / core.

Accédez au src/enviroments/enviroments.tsmode production et activez-le

export const environment = {
  production: true
};

pour Angular 2

Pour activer le mode de production en angulaire 6.XX Il suffit d'aller dans le fichier d'environnement

Comme ce chemin

Ton chemin: project>\src\environments\environment.ts

Changement production: falsede:

export const environment = {
  production: false
};

À

export const environment = {
  production: true
};

La plupart du temps, le mode prod n'est pas nécessaire pendant le développement. Notre solution de contournement consiste donc à l'activer uniquement lorsque ce n'est PAS localhost.

Dans votre navigateur main.tsoù vous définissez votre AppModule racine:

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

Le isLocalpeut également être utilisé à d'autres fins comme enableTracingpour RouterModuleune meilleure trace de la pile de débogage pendant la phase de développement.

Lorsque la commande ng build est utilisée, elle écrase le fichier environment.ts

Par défaut, lorsque la commande ng build est utilisée, elle définit l'environnement de développement

Afin d'utiliser l'environnement de production, utilisez la commande suivante ng build --env = prod

Cela activera le mode production et mettra automatiquement à jour le fichier environment.ts

vous pouvez utiliser dans votre app.ts || fichier main.ts

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

Dans le fichier environment.ts, définissez la production sur true

export const environment = {
  production: true
};

Pour ceux qui effectuent le chemin de mise à niveau sans passer également à TypeScript, utilisez:

ng.core.enableProdMode()

Pour moi (en javascript), cela ressemble à:

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

Vous n'avez pas besoin de fournir un fichier environment.ts ou un tel fichier par votre projet d'amorçage. Ayez simplement un fichier configuration.ts et ajoutez toutes ces entrées qui nécessitent une décision d'exécution (exemple: - configuration de journalisation et URL). Cela s'intégrera dans n'importe quelle structure de conception et aidera également à l'avenir

configuration.ts

export class Configuration {

   isInProductionMode : bool = true;

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

// Maintenant, utilisez dans votre code de démarrage (main.ts ou équivalent selon la conception du projet d'amorçage

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

ng build --prod remplace environment.ts par environment.prod.ts

ng build --prod

Mon projet Angular 2 n'a pas le fichier "main.ts" mentionné d'autres réponses, mais il a un fichier " boot.ts ", qui semble être à peu près la même chose. (La différence est probablement due aux différentes versions d'Angular.)

L'ajout de ces deux lignes après la dernière importdirective dans "boot.ts" a fonctionné pour moi:

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