วิธีเปิดใช้งานโหมดการผลิต

ฉันอ่านคำถามที่เกี่ยวข้องและพบคำถามนี้แต่คำถามของฉันคือฉันจะเปลี่ยนจากการพัฒนาเป็นโหมดการผลิตได้อย่างไร มีความแตกต่างบางอย่างระหว่างโหมดที่มีการชี้ให้เห็นเป็นที่นี่

ในคอนโซลฉันเห็น....Call enableProdMode() to enable the production mode.แต่ฉันไม่แน่ใจว่าอินสแตนซ์ของประเภทใดที่ฉันควรเรียกใช้วิธีการนั้น

ใครสามารถตอบคำถามนี้ได้ไหม

คุณเปิดใช้งานได้โดยการนำเข้าและดำเนินการฟังก์ชั่น (ก่อนที่จะเรียก bootstrap):

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

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

แต่ข้อผิดพลาดนี้เป็นตัวบ่งชี้ว่ามีบางอย่างผิดปกติกับการผูกของคุณดังนั้นคุณไม่ควรเพียงแค่ยกเลิกมัน แต่ลองคิดดูว่าทำไมมันถึงเกิดขึ้น

วิธีที่ดีที่สุดที่จะเปิดใช้งานโหมดการผลิตสำหรับเชิงมุม 2 โปรแกรมคือการใช้เชิงมุม-CLIng build --prodและสร้างแอพลิเคชันที่มี สิ่งนี้จะสร้างแอปพลิเคชันที่มีโปรไฟล์การผลิต การใช้ angular-cli มีประโยชน์ในการใช้โหมดการพัฒนาโดยใช้ng serveหรือng buildในขณะที่กำลังพัฒนาโดยไม่ต้องเปลี่ยนรหัสตลอดเวลา

สิ่งนี้ใช้ได้กับฉันโดยใช้ Angular 2 รุ่นล่าสุด (2.0.0-rc.1):

main.ts

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

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

นี่คือการอ้างอิงฟังก์ชั่นจากเอกสารของพวกเขา: https://angular.io/api/core/enableProdMode

เมื่อฉันสร้างโครงการใหม่โดยใช้ angi-cli ไฟล์ถูกรวมเรียกว่า environment.ts ภายในไฟล์นี้เป็นตัวแปรอย่างนั้น

export const environment = {
  production: true
};

จากนั้นใน main.ts คุณมีสิ่งนี้

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

คุณสามารถเพิ่มสิ่งนี้เข้ากับโครงการที่ไม่ใช่ angular-cli ฉันจะถือว่าเนื่องจาก enableProdMode () กำลังนำเข้าจาก @ angular / core

ไปที่src/enviroments/enviroments.tsและเปิดใช้งานโหมดการผลิต

export const environment = {
  production: true
};

สำหรับเชิงมุม 2

เพื่อเปิดใช้งานโหมดการผลิตในเชิงมุม 6.XX เพียงแค่ไปที่ไฟล์สภาพแวดล้อม

ชอบเส้นทางนี้

เส้นทางของคุณ: project>\src\environments\environment.ts

เปลี่ยนproduction: falseจาก:

export const environment = {
  production: false
};

ถึง

export const environment = {
  production: true
};

โหมด prod เวลาส่วนใหญ่ไม่จำเป็นในระหว่างการพัฒนา ดังนั้นวิธีแก้ปัญหาของเราคือเปิดใช้งานเมื่อไม่ใช่ localhost เท่านั้น

ในเบราว์เซอร์ของคุณ ' main.tsที่คุณกำหนด AppModule รูทของคุณ:

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

isLocalนอกจากนี้ยังสามารถใช้เพื่อวัตถุประสงค์อื่น ๆ เช่นenableTracingสำหรับRouterModuleสำหรับการแก้จุดบกพร่องที่ดีกว่าสแต็คร่องรอยระหว่างขั้นตอนการพัฒนา

เมื่อคำสั่ง ng build ถูกใช้มันจะเขียนทับไฟล์ environment.ts

โดยค่าเริ่มต้นเมื่อใช้คำสั่ง ng build จะตั้งค่าสภาพแวดล้อม dev

ในการใช้สภาพแวดล้อมการผลิตให้ใช้คำสั่ง ng build --env = prod

สิ่งนี้จะเปิดใช้งานโหมดการผลิตและอัปเดตไฟล์ environment.ts โดยอัตโนมัติ

คุณสามารถใช้ใน app.ts || ไฟล์ main.ts

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

สำหรับผู้ที่ทำพา ธ การอัพเกรดโดยไม่เปลี่ยนไปใช้ TypeScript:

ng.core.enableProdMode()

สำหรับฉัน (ใน javascript) ดูเหมือนว่า:

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

คุณไม่ต้องการสภาพแวดล้อมใด ๆ หรือไฟล์ดังกล่าวที่จะให้โครงการเมล็ดพันธุ์ของคุณ เพียงแค่มี configuration.ts และเพิ่มรายการดังกล่าวทั้งหมดซึ่งต้องการการตัดสินใจรันไทม์ (ตัวอย่าง: - การกำหนดค่าการบันทึกและ URL) สิ่งนี้จะพอดีกับโครงสร้างการออกแบบใด ๆ และยังช่วยในอนาคต

configuration.ts

export class Configuration {

   isInProductionMode : bool = true;

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

// ตอนนี้ใช้ในรหัสเริ่มต้นของคุณ (main.ts หรือเทียบเท่าตามการออกแบบโครงการเมล็ดพันธุ์

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

ใน environment.ts ไฟล์ตั้งค่าการผลิตเป็นจริง

export const environment = {
  production: true
};

ng build --prod แทนที่ environment.ts ด้วย environment.prod.ts

ng build --prod

My Angular 2 project ไม่มีไฟล์ "main.ts" ที่กล่าวถึงคำตอบอื่น ๆ แต่มีไฟล์ " boot.ts " ซึ่งดูเหมือนจะเกี่ยวกับสิ่งเดียวกัน (ความแตกต่างอาจเกิดจาก Angular รุ่นต่างๆ)

การเพิ่มสองบรรทัดหลังimportคำสั่งสุดท้ายใน "boot.ts" ได้ผลสำหรับฉัน:

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