Bagaimana cara mengaktifkan mode produksi?


182

Saya membaca pertanyaan terkait dan saya menemukan ini , tetapi pertanyaan saya adalah bagaimana saya bisa beralih dari pengembangan ke mode produksi. Ada beberapa perbedaan antara mode yang ditunjukkan di sini .

Di konsol saya bisa melihat ....Call enableProdMode() to enable the production mode.Namun, saya tidak yakin contoh jenis yang harus saya panggil metode itu.

Adakah yang bisa menjawab pertanyaan ini?


Saya menemukan ini konfigurasi lewat gila menggunakan Webpack 2+ Angular2 dan Typecript, menciptakan solusi sederhana: github.com/Sweetog/yet-another-angular2-boilerplate
Brian Ogden

Jawaban:


212

Anda mengaktifkannya dengan mengimpor dan menjalankan fungsi (sebelum memanggil bootstrap):

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

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

Tetapi kesalahan ini adalah indikator bahwa ada sesuatu yang salah dengan ikatan Anda, jadi Anda tidak boleh mengabaikannya begitu saja, tetapi cobalah mencari tahu mengapa itu terjadi.


Bagaimana mengaktifkanProdMode () jika Anda tidak menggunakan naskah? Jika saya hanya memanggil metode ini sebelum ng.platform.browser.bootstrap (...) Saya mendapatkan kesalahan ini: enableProdMode tidak didefinisikan
Daniel Dudas

2
@DanielDudas Saya tidak menggunakan es5, tetapi cobang.core.enableProdMode()
Sasxa

3
Saya percaya "angular2 / core" sekarang "@ angular / core". Lihat jawaban saya di bawah ini.
adampasz

Saya menggunakan Ionic2. Dalam file apa bootstrap ini dipanggil? Ketika saya membuat aplikasi sampel, ionic start test sidemenu --v2 --tssaya melihat app.tstetapi di mana fungsi bootstrap ini dipanggil?
Guus

1
Saya melakukan hal yang sama tetapi saya mendapatkan pengecualian seperti "Tidak dapat mengaktifkan mode prod setelah pengaturan platform". Adakah yang bisa membantu saya menyelesaikan masalah ini?
Gowtham

81

Cara terbaik untuk mengaktifkan mode produksi untuk aplikasi Angular 2, adalah dengan menggunakan angular-cli dan membangun aplikasi ng build --prod. Ini akan membangun aplikasi dengan profil produksi. Menggunakan angular-cli memiliki keuntungan karena dapat menggunakan mode pengembangan menggunakan ng serveatau ng buildsambil mengembangkan tanpa mengubah kode sepanjang waktu.


6
Saya menggunakan Angular 6 dan ng build --prod untuk membangun dalam mode prod. Hanya menempatkan ini di sini untuk pendatang baru yang mengunjungi halaman ini.
Verbose

Saya pikir build --prod telah diimplementasikan dengan mempertimbangkan isDevMode dan mengaktifkanProdMode. Jawaban ini harus ditandai sebagai jawaban
bubi


55

Ketika saya membangun proyek baru menggunakan angular-cli. File dimasukkan bernama environment.ts. Di dalam file ini adalah variabel seperti itu.

export const environment = {
  production: true
};

Kemudian di main.ts Anda punya ini.

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

Anda dapat menambahkan ini ke proyek non-sudut-cli, saya akan berasumsi, karena enableProdMode () sedang diimpor dari @ angular / core.


Bagaimana cara kerjanya untuk non-prod build? Saya berasumsi dalam kasus itu environment.ts diabaikan, jadi jangan Anda mendapatkan kesalahan kompilasi tsc ketika mencoba mengimpor modul?
llasarov

@llasarov environment.ts hanya berperilaku seperti file konfigurasi, di mana Anda dapat mengaktifkan / menonaktifkan mode produksi. Main.ts hanya memanggil enableProdMode jika itu benar, jadi ini bisa dilakukan tanpa proses build spesifik. Anda juga dapat memilih logging di sini, dengan memeriksa apakah logMode adalah debug, kemudian layanan logger kustom Anda melakukan StackTrace terperinci yang lain hanya masuk satu liner
NitinSingh

13

Pergi ke src/enviroments/enviroments.tsdan aktifkan mode produksi

export const environment = {
  production: true
};

untuk Angular 2


10

Untuk mengaktifkan mode produksi dalam sudut 6.XX Cukup buka file environment

Suka jalan ini

Jalanmu: project>\src\environments\environment.ts

Ubah production: falsedari:

export const environment = {
  production: false
};

Untuk

export const environment = {
  production: true
};

masukkan deskripsi gambar di sini


8

Sebagian besar mode waktu prod tidak diperlukan selama waktu pengembangan. Jadi solusi kami adalah hanya mengaktifkannya saat BUKAN localhost.

Di peramban main.tstempat Anda menetapkan AppModule root:

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

The isLocaljuga dapat digunakan untuk tujuan lain seperti enableTracinguntuk RouterModuleuntuk debugging yang lebih baik jejak stack selama fase dev.


6

Ketika ng membangun perintah digunakan itu menimpa file environment.ts

Secara default ketika ng build perintah digunakan itu mengatur lingkungan dev

Untuk menggunakan lingkungan produksi, gunakan perintah berikut ng build --env = prod

Ini akan mengaktifkan mode produksi dan secara otomatis memperbarui file environment.ts


1
Ini diubah dalam Angular CLI 6 menjadi ng build --configuration=production(sebagai default menggunakan file angular.json yang dihasilkan CLI).
slasky

5

Anda dapat menggunakan di app.ts || Anda file main.ts

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

5

Di file environment.ts set produksi menjadi true

export const environment = {
  production: true
};

Sungguh EZ: P TY untuk ...!
Carlos Galeano

4

Bagi mereka yang melakukan jalur peningkatan tanpa beralih ke penggunaan TypeScript:

ng.core.enableProdMode()

Bagi saya (dalam javascript) seperti ini:

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

4

Anda tidak memerlukan environment.ts atau file semacam itu untuk disediakan oleh proyek seed Anda. Hanya memiliki configuration.ts dan tambahkan semua entri yang memerlukan keputusan runtime (contoh: - konfigurasi logging dan url). Ini akan sesuai dengan struktur desain apa pun dan juga membantu di masa depan

configuration.ts

export class Configuration {

   isInProductionMode : bool = true;

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

// Sekarang gunakan dalam kode startup Anda (main.ts atau setara sesuai desain proyek unggulan

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

1
bagaimana Anda membedakan prod / dev dengan yang isInProductionModebenar / salah? dalam waktu membangun?
LeOn - Han Li

Biasanya sebagai parameter GULP atau setara
NitinSingh

JSON memiliki entri sebagai berikut: - "environmentSource": "environment / environment.ts", "environment": {"dev": "environment / environment.ts", "prod": "environment / environment.prod.ts" }
NitinSingh


0

Proyek Angular 2 saya tidak memiliki file "main.ts" yang menyebutkan jawaban lain, tetapi ia memiliki file " boot.ts ", yang tampaknya mengenai hal yang sama. (Perbedaannya mungkin karena versi Angular yang berbeda.)

Menambahkan dua baris ini setelah importarahan terakhir di "boot.ts" bekerja untuk saya:

import { enableProdMode } from "@angular/core";
enableProdMode();
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.