कोणीय 6 में `एनजी सर्व` के माध्यम से पर्यावरण कैसे सेट करें


169

मैं अपने Angular 5.2 ऐप को Angular 6 में अपडेट करने का प्रयास कर रहा हूं। मैंने सफलतापूर्वक Angular अपडेट गाइड ( angular-cliv6 के अपडेट सहित ) में निर्देशों का पालन किया है , और अब मैं ऐप के माध्यम से सेवा देने की कोशिश कर रहा हूं

ng serve --env=local

लेकिन यह मुझे त्रुटि देता है:

अज्ञात विकल्प: '--env'

मैं कई वातावरण ( dev/local/prod) का उपयोग करता हूं , और यह वह तरीका है जो यह कोणीय 5.2 में काम कर रहा था। अब मैं पर्यावरण को एंगुलर 6 में कैसे सेट कर सकता हूं?


1
इसका v6, आप angular-cliपूरे ऐप के साथ अपडेट करते हैं, इसलिए मैंने इसका स्पष्ट रूप से विचार किया:]
मार्टिन एडेमेक

5
बहुत मददगार, मार्टिन। अपना दृष्टिकोण पेश करने के लिए धन्यवाद। वास्तव में यह कम से कम स्पष्ट नहीं है।
मैक्सएक्सएक्स

जवाबों:


303

आपको नए configurationविकल्प का उपयोग करने की आवश्यकता है (यह काम करता है ng buildऔर ng serveसाथ ही साथ)

ng serve --configuration=local

या

ng serve -c local

यदि आप अपनी angular.jsonफ़ाइल को देखते हैं, तो आप देखेंगे कि आपके पास प्रत्येक कॉन्फ़िगरेशन (aot, optimizer, environment files, ...) के लिए सेटिंग्स पर बेहतर नियंत्रण है।)

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

आप यहाँ अधिक जानकारी प्राप्त कर सकते हैंपर्यावरण विशिष्ट विन्यास के प्रबंधन के लिए ।

नीचे अन्य जवाब में कहा है, यदि आप एक नए 'पर्यावरण' जोड़ने की जरूरत है, आप के लिए एक नया विन्यास जोड़ने की जरूरत है निर्माण कार्य, करने के लिए और, अपनी आवश्यकताओं पर निर्भर करता है की सेवा और परीक्षण कार्यों के साथ-साथ।

एक नया वातावरण जोड़ना

संपादित करें : इसे स्पष्ट करने के लिए, buildअनुभाग में फ़ाइल प्रतिस्थापन निर्दिष्ट किया जाना चाहिए । इसलिए यदि आप ng serveएक विशिष्ट environmentफ़ाइल (जैसे देव 2 ) के साथ उपयोग करना चाहते हैं , तो आपको पहले buildएक नया dev2 विन्यास जोड़ने के लिए अनुभाग को संशोधित करना होगा।

"build": {
   "configurations": {
        "dev2": {

          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.dev2.ts"
            }
            /* You can add all other options here, such as aot, optimization, ... */
          ],
          "serviceWorker": true
        },

फिर आपके द्वारा घोषित किए serveगए dev2 build कॉन्फ़िगरेशन की ओर इशारा करते हुए एक नया कॉन्फ़िगरेशन जोड़ने के लिए अपने अनुभाग को संशोधित करें

"serve":
      "configurations": {
        "dev2": {
          "browserTarget": "projectName:build:dev2"
        }

फिर आप उपयोग कर सकते हैं ng serve -c dev2, जो कि देव 2 कॉन्फिग फाइल का उपयोग करेगा


क्या आपको पता है कि कॉन्फ़िगरेशन में आधार-हाइपर को जोड़ना भी संभव है? या सिर्फ एनजी निर्माण --c मंचन में --base-href = / yyy /
एडुआर्डो Tolino

@EduardoTolino: हाँ आप कर सकते हैं, एक baseHrefविकल्प है
डेविड

मैं देव परिवेश के लिए दूरस्थ डिबगिंग पोर्ट को कहां निर्दिष्ट कर सकता हूं? ताकि साथ डिबग किया जा सके VSCode। में Angular 6निश्चित रूप से। ताकि ब्राउज़र को ng serveलॉन्च करते समय कमांड में रिमोट डीबगर पोर्ट शामिल हो Chrome
स्टीफन

जानकारी लिंक अपडेट की गई: github.com/angular/angular-cli/wiki/…
Mateo Tibaquira

1
एनजी परोसें -सी स्थानीय को "एनजी सर्व" की तुलना में आवेदन संकलन करने के लिए समय लगता है
विग्नेश

46

यह उत्तर अच्छा लगता है।
हालाँकि, यह मुझे एक त्रुटि की ओर ले जाता है क्योंकि यह
Configuration 'xyz' could not be found in project ...
निर्माण में त्रुटि के परिणामस्वरूप होता है ।
यह न केवल अद्यतन बिल्ड कॉन्फ़िगरेशन के लिए आवश्यक है, बल्कि लोगों की सेवा भी करता है।

तो बस कोई भ्रम नहीं छोड़ने के लिए:

  1. --env में समर्थित नहीं है angular 6
  2. --envमें परिवर्तित हो गया --configuration|| -c(और अब अधिक शक्तिशाली है)
  3. नई पर्यावरण फ़ाइल को जोड़ने के अलावा, विभिन्न एनवी को प्रबंधित करने के लिए, अब angular.jsonफ़ाइल में कुछ बदलाव करना आवश्यक है :
    • बिल्ड { ... "build": "configurations": ... प्रॉपर्टी में नया कॉन्फ़िगरेशन जोड़ें
    • नए बिल्ड कॉन्फ़िगरेशन में केवल fileReplacementsभाग हो सकता है , (लेकिन अधिक विकल्प उपलब्ध हैं)
    • सर्व { ... "serve": "configurations": ... संपत्ति में नया कॉन्फ़िगरेशन जोड़ें
    • नए सर्व कॉन्फ़िगरेशन में शामिल होंगेbrowserTarget="your-project-name:build:staging"

8

तुम कोशिश कर सकते हो: ng serve --configuration=dev/prod

उपयोग का निर्माण करने के लिए: ng build --prod --configuration=dev

आशा है कि आप एक अलग तरह के वातावरण का उपयोग कर रहे हैं।


एनजी सर्व --configuration = dev / prod कमांड को एनजी सर्व करने की तुलना में समय क्यों लगता है?
विग्नेश

एनजी सर्व --configuration = प्रोडक्ट्स में अधिक समय लगता है फिर एनजी सर्व करें --configuration = प्रोडक्शंस फ़ाइल न्यूनतम होने के कारण और तैयार कोड के कारण।
amku91

ठीक है अगर मैं "एनजी सर्व --configuration = dev" कमांड का उपयोग करता हूं, तो इसका अर्थ है कि अधिक समय लग रहा है
विग्नेश

नहीं, इसमें अधिक समय नहीं लगना चाहिए। ठेस के वातावरण में उत्पादन के लिए कोड को छोटा, छोटा और अनुकूलित करने के लिए अतिरिक्त कदम हैं। अन्य वातावरण को सामान्य समय लेना चाहिए, जब तक कि आप इन अतिरिक्त चरणों को स्पष्ट रूप से सक्रिय नहीं करते हैं।
रेजिनाल्डो केमारगो रिबेरो

6

कोणीय 2 - 5 के लिए कोणीय में बहुविध लेख का संदर्भ लें

कोणीय 6 उपयोग के लिए ng serve --configuration=dev

नोट: कोणीय 6 के लिए भी यही लेख देखें। लेकिन आप जहां भी पाते --envहैं उपयोग करते हैं --configuration। यह कोणीय 6 के लिए अच्छी तरह से काम करता है।


2

आप उत्पादन पर्यावरण के ng serve -c devलिए विकास पर्यावरण के ng serve -c prodलिए कमांड का उपयोग कर सकते हैं

जबकि निर्माण भी एक ही लागू होता है। आप ng build -c devदेव निर्माण के लिए उपयोग कर सकते हैं


2

कोणीय अब समर्थन नहीं करता है - इसके बजाय आपको उपयोग करना होगा

ng serve -c dev

विकास के माहौल के लिए, और

ng serve -c prod 

उत्पादन के लिए।

नोट: -cया--configuration


यह वर्ष पहले पूछा गया और उत्तर दिया गया, यह भी कि आपका उत्तर गलत है, इसका -c(एकल डैश के साथ) या --configuration(दोहरे डैश के साथ)।
मार्टिन एडेमेक

0

एंगुलर 6 के निर्माण के लिए इस कमांड का उपयोग करें

ng build --prod --configuration=dev
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.