आप कोणीय एप्लिकेशन को कैसे तैनात करते हैं?


194

उत्पादन के चरण में पहुंचने के बाद आप कोणीय एप्लिकेशन को कैसे तैनात करते हैं?

मेरे द्वारा अब तक देखे गए सभी गाइड (यहां तक ​​कि angular.io पर ) सेवारत और ब्राउज़रसिंक के लिए एक lite- सर्वर पर गिने जा रहे हैं ताकि परिवर्तन को प्रतिबिंबित किया जा सके - लेकिन जब आप विकास के साथ समाप्त हो जाते हैं, तो आप ऐप को कैसे प्रकाशित कर सकते हैं?

क्या मैं पृष्ठ .jsपर सभी संकलित फ़ाइलों को आयात index.htmlकरता हूं या क्या मैं उन्हें gulp का उपयोग करके छोटा करता हूं? क्या वे काम करेंगे? क्या मुझे उत्पादन संस्करण में SystemJS की आवश्यकता है?

जवाबों:


91

आप वास्तव में एक में दो सवालों को छू रहे हैं।

पहले एक है कैसे अपने आवेदन की मेजबानी के लिए?
और जैसा कि @toskv ने उत्तर देने के लिए अपने बहुत व्यापक प्रश्न का उल्लेख किया है और कई अलग-अलग चीजों पर निर्भर करता है।

दूसरा एक है कैसे आप आवेदन की तैनाती संस्करण को तैयार हैं?
आपके पास यहां कई विकल्प हैं:

  1. जैसा है वैसा ही तैनात रहें। बस इतना ही - कोई भी मिनिमाइजेशन, कॉन्टेक्टेशन, नेम मैनबलिंग, आदि ट्रांसपाइल आपके सभी ts प्रोजेक्ट को आपके सभी परिणामी js / css / ... होस्ट करने वाले सर्वर पर निर्भर करता है। और आप जाने के लिए अच्छे हैं।
  2. विशेष बंडलिंग टूल, जैसे webpackया systemjsबिल्डर का उपयोग करके तैनात करें ।
    वे उन सभी संभावनाओं के साथ आते हैं जिनकी # 1 में कमी है।
    आप अपने सभी ऐप कोड को सिर्फ एक जोड़ी js / css / ... फाइलों में पैक कर सकते हैं जिन्हें आप अपने HTML में रेफर करते हैं। systemjsबिल्डर आपको systemjsअपने तैनाती पैकेज के हिस्से के रूप में शामिल करने की आवश्यकता से छुटकारा पाने की अनुमति देता है ।

  3. आप ng deployअपने सीएलआई से अपने ऐप को तैनात करने के लिए कोणीय 8 के रूप में उपयोग कर सकते हैं । ng deployअपनी पसंद के मंच (जैसे @angular/fire) के साथ संयोजन के रूप में उपयोग करने की आवश्यकता होगी । यहां आपके लिए सबसे अच्छा काम करने के लिए आप आधिकारिक डॉक्स की जांच कर सकते हैं

हां, आपको systemjsअपने पैकेज के हिस्से के रूप में अन्य बाहरी पुस्तकालयों की तैनाती और गुच्छा की आवश्यकता होगी । और हाँ, आप उन्हें अपने HTML पृष्ठ से संदर्भित जेएस फाइलों के सिर्फ दो में बंडल करने में सक्षम होंगे।

आपको पृष्ठ से अपनी सभी संकलित js फ़ाइलों का संदर्भ देने की आवश्यकता नहीं है - systemjsक्योंकि एक मॉड्यूल लोडर इसका ध्यान रखेगा।

मुझे पता है कि यह मैला लगता है - # 2 के साथ शुरू करने में मदद करने के लिए यहां दो बहुत अच्छे नमूना अनुप्रयोग हैं:

SystemJS बिल्डर: कोणीय 2 बीज

वेबपैक: कोणीय 2 वेबपैक स्टार्टर


1
मैं JSPM ( jspm.io ) की भी सिफारिश करूंगा : यहाँ जानकारी gist.github.com/robwormald/429e01c6d802767441ec और बीज परियोजना यहाँ github.com/madhukard/angular2
हैरी

6 महीने के बाद जब Angular2 rc5 में है और जल्द ही जारी किया जाएगा, यह उत्तर अभी भी प्रासंगिक है क्योंकि यह angular2 बीज परियोजना का संदर्भ देता है। महान परियोजना, योगदानकर्ताओं की बहुत!
lame_coder

3
मैं अभी भी बिंदु (1) के साथ बड़े पैमाने पर भ्रमित हूं। 'AS IS' का अर्थ क्या है? क्या इसका मतलब यह है कि सभी 50000 नोड_मॉडल फ़ाइलों की नकल करना? मैं HEROES उदाहरण को तैनात करने की कोशिश कर रहा हूं और यह सुनिश्चित नहीं कर सकता कि सूचकांक फ़ाइल में स्क्रिप्ट स्रोत के रूप में क्या जोड़ना है।
ओलिवर वाटकिंस

1
हां - इसका मतलब है कि आपके सभी निर्भरता की नकल करना, इसमें से node_modulesभी शामिल हैं। नोट - कार्यक्रम को चलाने के लिए आपको केवल निर्भरता की आवश्यकता होनी चाहिए। उन डिपों की नकल न करें जो केवल विकास के लिए उपयोग किए जाते हैं (उदाहरण के लिए गुलप / ग्रंट / आदि)।
Amid

1
हाँ। उस फाइल में system.js को निर्देश दिया जाता है कि आपके सभी आश्रितों से क्या और कहां लोड किया जाए।
के बीच

88

सरल उत्तर। कोणीय सीएलआई का उपयोग करें और जारी करें

ng build 

अपने प्रोजेक्ट के रूट डायरेक्टरी में कमांड करें। साइट को डायरेक्ट डायरेक्टरी में बनाया जाएगा और आप इसे किसी भी वेब सर्वर पर तैनात कर सकते हैं।

यह परीक्षण के लिए निर्माण करेगा, यदि आपके पास आपके ऐप में उत्पादन सेटिंग्स हैं जिनका आपको उपयोग करना चाहिए

ng build --prod

यह distनिर्देशिका में प्रोजेक्ट का निर्माण करेगा और इसे सर्वर पर धकेल दिया जा सकता है।

बहुत तब से हुआ है जब मैंने पहली बार इस उत्तर को पोस्ट किया है। CLI अंत में एक 1.0.0 पर है, इसलिए इस गाइड का अपग्रेड करने के बाद आपकी परियोजना का निर्माण होने से पहले आपका प्रोजेक्ट होना चाहिए। https://github.com/angular/angular-cli/wiki/stories-rc-update


आप उसे कैसे करते हैं? कोणीय 2 त्वरित शुरुआत के बाद, मैं 'npm स्टार्ट' के बजाय उस कमांड को चलाता हूं, और मुझे 'एनजी कमांड नहीं मिला'
18

1
@NateBunney मैं वेब देव दृश्य के लिए नया हूँ। मैं उलझन में हूं। एनजी बिल्ड डिस्ट फ़ोल्डर में फाइलों का एक गुच्छा तैयार करता है। मान लें कि आप वेब सर्वर के रूप में स्प्रिंग बूट का उपयोग कर रहे हैं, तो क्या आप उन फ़ाइलों को स्प्रिंग बूट में सार्वजनिक वेब-इन फ़ोल्डर में कॉपी पेस्ट करते हैं? या क्या आपको ng2 dist की सेवा के लिए स्प्रिंग बूट के सामने एक नोडज सर्वर की आवश्यकता है?
श्रीकांत

3
प्रलेखन में ऐसा क्यों नहीं है? यह एक बहुत बड़ी चूक लगती है!
कोकोडोको

याद रखें कि कोणीय 2 का पहला संस्करण अब मुश्किल से एक महीने का है।
नैट बन्ने

1
@ user1460043, हाँ, लेकिन आपकी समस्या का एक आसान समाधान है। बस एक नई कोणीय सीएलआई परियोजना को रोल करें और अपनी src डायरेक्टरी को CLI प्रोजेक्ट में कॉपी करें।
नैट बन्नी

21

कोणीय सीएलआई के साथ यह आसान है। हरोकू के लिए एक उदाहरण:

  1. एक Heroku खाता बनाएँ और CLI स्थापित करें

  2. ले जाएँ angular-cliकरने के लिए DEP dependenciesमें package.json(यह स्थापित हो जाता ताकि जब आप Heroku करने के लिए धक्का।

  3. एक postinstallस्क्रिप्ट जोड़ें ng buildजो कोड को हरोकू में धकेलने पर चलेगी। एक नोड सर्वर के लिए एक स्टार्ट कमांड भी जोड़ें जो निम्न चरण में बनाया जाएगा। यह distसर्वर पर डायरेक्टरी में ऐप के लिए स्टैटिक फाइल्स को रखेगा और बाद में ऐप को शुरू करेगा।

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}
  1. एप्लिकेशन की सेवा के लिए एक एक्सप्रेस सर्वर बनाएं।
// server.js
const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);
  1. एक Heroku रिमोट बनाएं और ऐप को डिपो करने के लिए पुश करें।
heroku create
git add .
git commit -m "first deploy"
git push heroku master

यहां एक त्वरित राइटअप मैंने किया है जिसमें अधिक विवरण हैं, जिसमें HTTPS का उपयोग करने के अनुरोधों को कैसे लागू करना है और कैसे संभालना है PathLocationStrategy:)


निर्भरता में कोणीय-क्ली जोड़ने से डिस्ट का आकार बढ़ जाता है कि इसे कैसे संभालना है
जनक भट्ट

7

मैं हमेशा के लिए उपयोग :

  1. फ़ोल्डर को डिस्टर्ब करने के लिए कोणीय-क्ली के साथ अपने कोणीय अनुप्रयोग का निर्माण करेंng build --prod --output-path ./dist
  2. अपने कोणीय अनुप्रयोग पथ में server.js फ़ाइल बनाएँ :

    const express = require('express');
    const path = require('path');
    
    const app = express();
    
    app.use(express.static(__dirname + '/dist'));
    
    app.get('/*', function(req,res) {
        res.sendFile(path.join(__dirname + '/dist/index.html'));
    });
    app.listen(80);
  3. हमेशा के लिए शुरू करो forever start server.js

बस इतना ही! आपका आवेदन चालू होना चाहिए!


6

उम्मीद है कि यह मदद कर सकता है, और उम्मीद है कि मैं सप्ताह के दौरान यह कोशिश करूँगा।

  1. Azure पर वेब ऐप बनाएं
  2. बनाम कोड में कोणीय 2 ऐप बनाएं।
  3. बंडल करने के लिए webpack.js।
  4. Azure साइट प्रकाशित प्रोफ़ाइल xml डाउनलोड करें
  5. साइट प्रोफ़ाइल के साथ https://www.npmjs.com/package/azure-deploy का उपयोग करके Azure-तैनात कॉन्फ़िगर करें
  6. फैल जाते हैं।
  7. क्रीम का स्वाद लें।

58
कृपया Microsoft- ify इस तरह की चीजों को न करें क्योंकि यह Azure के साथ संगत है। यह कहने जैसा है कि यदि आप कोणीय का उपयोग कर रहे हैं, तो आपको केवल Google क्लाउड सेवाओं का उपयोग करने में सक्षम होना चाहिए।
ozanmuyes

2
यह जानने के लिए उपयोगी है कि एज़्योर में तैनात करने के लिए एक एनपीएम मॉड्यूल है।
एंथनी ब्रेनेलीयर

1
@ उपयोगकर्ता 6402762 +1 क्रीम का स्वाद लें।
लियोनार्डो वाइल्ड्ट

मैं इस उत्तर का उपयोग करके अपने कोणीय 4 वेबैप को तैनात करने की कोशिश कर रहा हूं, लेकिन मुझे गलतियां मिलती रहती हैं Can't resolve 'node-uuid' in path\azure-deploy\lib। क्या यह अभी भी संभव है? मैंने चरण 5 को कॉन्फ़िगर किया है app.moduleऔर मुझे यकीन नहीं है कि मैंने चरण 3 और 4 को सही ढंग से किया है। क्या आप उन्हें स्पष्ट कर सकते हैं?
राउटर वनरॉक

6

अगर आप लोकलहोस्ट पर मेरे जैसे ऐप का परीक्षण करते हैं या आपको रिक्त सफेद पृष्ठ के साथ कुछ समस्याएं होंगी, तो मैं इसका उपयोग करता हूं:

ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"

स्पष्टीकरण:

ng build

ऐप बनाएं लेकिन कोड में कई जगह, टैब और अन्य सामान हैं जो कोड को मानव द्वारा पढ़ा जा सकता है। सर्वर के लिए यह महत्वपूर्ण नहीं है कि कोड कैसा दिखता है। यही कारण है कि मैं का उपयोग करें:

ng build --prod --build-optimizer 

यह उत्पादन के लिए कोड बनाते हैं और आकार --build-optimizerको कम करते हैं [ ] अधिक कोड को कम करने की अनुमति देते हैं]।

इसलिए अंत में मैं --base-href="http://127.0.0.1/my-app/"एप्लिकेशन को दिखाने के लिए जोड़ रहा हूं जहां 'मुख्य फ्रेम' [सरल शब्दों में] है। इसके साथ आप किसी भी फ़ोल्डर में कई कोणीय एप्लिकेशन रख सकते हैं।


5

अपने एंगुलर 2 ऐप को किसी प्रोडक्शन सर्वर, सबसे पहले और सबसे पहले तैनात करने के लिए, सुनिश्चित करें कि आपका ऐप आपके मशीन पर स्थानीय रूप से चलता हो।

Angular2 ऐप को नोड ऐप के रूप में भी तैनात किया जा सकता है।

इसलिए, नोड एंट्री पॉइंट फ़ाइल सर्वर बनाएं। js / app.js (मेरा उदाहरण एक्सप्रेस का उपयोग करता है)

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/';

app.set('port', (process.env.PORT || 3000));

app.use(express.static(staticRoot));

app.use(function(req, res, next){

    // if the request is not html then move along
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }

    // if the request has a '.' assume that it's for a file, move along
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }

    fs.createReadStream(staticRoot + 'index.html').pipe(res);

}); 

app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

अपने पैकेज में एक निर्भरता के रूप में एक्सप्रेस भी जोड़ें । Json फ़ाइल।

फिर इसे अपने पसंदीदा वातावरण पर तैनात करें।

मैंने IIS पर तैनाती के लिए एक छोटा सा ब्लॉग एक साथ रखा है। लिंक का पालन करें


5

IIS में अपने एप्लिकेशन को नियुक्त करने के लिए नीचे दिए गए चरणों का पालन करें।

चरण 1: कमांड एनजी बिल्ड एनप्रोड का उपयोग करके अपने कोणीय अनुप्रयोग का निर्माण करें

चरण 2: निर्माण के बाद सभी फाइलें आपके एप्लिकेशन पथ के डिस्ट फ़ोल्डर में जमा हो जाती हैं।

चरण 3: QRCode नाम से C: \ inetpub \ wwwroot में एक फ़ोल्डर बनाएँ ।

चरण 4: डिस्ट फ़ोल्डर की सामग्री को C: \ inetpub \ wwwroot \ QRCode फ़ोल्डर में कॉपी करें।

चरण 5: कमांड (विंडो + आर) का उपयोग करके आईआईएस मैनेजर खोलें और ठीक क्लिक करें inetmgr टाइप करें।

चरण 6: डिफ़ॉल्ट वेब साइट पर राइट क्लिक करें और ऐड एप्लिकेशन पर क्लिक करें ।

चरण 7: उपनाम नाम 'QRCode' दर्ज करें और C: \ inetpub \ wwwroot \ QRCode में भौतिक पथ सेट करें

चरण 8: index.html फ़ाइल खोलें और लाइन href = "\" ढूंढें और '\' निकालें।

चरण 9: अब किसी भी ब्राउज़र में एप्लिकेशन ब्राउज़ करें।

बेहतर समझ के लिए आप वीडियो का अनुसरण भी कर सकते हैं।

वीडियो url: https://youtu.be/F8EI-8XUNZc


4

यदि आप अपाचे (लिनक्स सर्वर) में अपना एप्लिकेशन तैनात करते हैं तो आप निम्न चरणों का पालन कर सकते हैं: निम्नलिखित चरणों का पालन करें :

चरण 1 : ng build --prod --env=prod

चरण 2 । (सर्वर में डिस्टर्ब कॉपी करें) फिर डिस्टर्ब फोल्डर बनाया गया, डिस्टर्ब फोल्डर कॉपी करें और इसे सर्वर की रूट डायरेक्टरी में तैनात करें।

चरण 3.htaccessरूट फ़ोल्डर में फ़ाइल बनाता है और इसमें पेस्ट करता है.htaccess

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

किस तरह का सर्वर? एक nginx सर्वर होना चाहिए या कि क्या जिले को शामिल करने वाला
famas23

टॉमकैट हो सकता है, आपकी पसंद। मैं कहूंगा कि आप इससे परिचित हैं।
वालेस होवेरी

किसी भी अपाचे लिनक्स या अन्य सर्वर, जिसका इस्तेमाल किया गया है।
सुमित जायसवाल

@TamaghnaBanerjee, चेक सर्वर री राइट मोड सक्षम है या नहीं?
सुमित जायसवाल

3

आपको समय-समय पर संकलक के साथ संकलित करके सबसे छोटा और तेज लोडिंग उत्पादन बंडल मिलता है, और रोल-अप के साथ ट्री-शेक / मिनिफाई करें जैसा कि कोणीय एओटी कुकबुक में दिखाया गया है: https://angular.io/docs/ts/latest/cookbook /aot-compiler.html

यह पिछले उत्तरों में बताए अनुसार कोणीय-सीएलआई के साथ भी उपलब्ध है, लेकिन यदि आपने सीएलआई का उपयोग करके अपना ऐप नहीं बनाया है तो आपको कुकबुक का पालन करना चाहिए।

मेरे पास सामग्री और एसवीजी चार्ट (एंगुलर 2 द्वारा समर्थित) के साथ एक कार्यशील उदाहरण है कि इसमें एओटी कुकबुक के साथ निर्मित एक बंडल शामिल है। बंडल बनाने के लिए आपको सभी कॉन्फ़िगरेशन और स्क्रिप्ट की आवश्यकता होती है। इसे यहां देखें: https://github.com/fintechneo/angular2-templates/

मैंने एक त्वरित वीडियो बनाया, जिसमें एक एओटी संकलित बिल्ड बनाम एक विकास वातावरण की फ़ाइलों और आकार के बीच का अंतर प्रदर्शित किया गया। यह ऊपर github भंडार से परियोजना को दर्शाता है। आप इसे यहां देख सकते हैं: https://youtu.be/ZoZDCgQwnmQ


डॉक्टर के संदर्भ के लिए और उल्लेख एओटी संकलन के लिए धन्यवाद। मान वास्तविक लगता है,"This cookbook describes how to radically improve performance by compiling Ahead of Time (AOT) during a build process."
एयरो

1
प्रतिक्रिया के लिए धन्यवाद - अगर आपको एओटी संकलन का परीक्षण करने का समय नहीं मिला है, तो मैंने एक वीडियो जोड़ा है जिसमें फ़ाइलों और आकार की संख्या में अंतर दिखा रहा है (उत्तर में संदर्भित गितुब प्रोजेक्ट का उपयोग करके)।
पीटर सैलोमोनसन

बहुत बढ़िया! इतना उपयोगी पीटर होने के लिए धन्यवाद!
एयरो

2

जीथुब पेज में कोणीय 2 की तैनाती

Ghpages में Angular2 Webpack का परीक्षण परिनियोजन

सबसे पहले सभी संबंधित फाइलों को प्राप्त करें dist अपने एप्लिकेशन फ़ोल्डर , मेरे लिए यह था: संपत्ति फ़ोल्डर में + सीएसएस फाइलें + main.bundle.js + polyfills.bundle.js + विक्रेता.bundle.js

फिर इस फाइल को उस रेपो में धकेलें जो आपने बनाया है।

1 - यदि आप चाहते हैं कि एप्लिकेशन रूट डायरेक्टरी पर चले - नाम [yourgithubernername] .github.io के साथ एक विशेष रेपो बनाएं। और इन फाइलों को मास्टर ब्रांच में धकेलें।

2 - जहां आप चाहें तो इन पेज को उप निर्देशिका में या रूट के अलावा किसी अन्य शाखा में बनाना चाहते हैं, तो शाखा -पृष्ठ बनाएं और इन फाइलों को उस शाखा में धकेलें।

दोनों ही मामलों में हम इन तैनात पृष्ठों तक पहुँचने के तरीके अलग-अलग होंगे।

पहली स्थिति के लिए यह https: // [yourgithubusername] .github.io होगा और दूसरे मामले के लिए यह [yourgithubusername] .github.io / [रेपो नाम] होगा

यदि मान लें कि आप इसे दूसरे मामले का उपयोग करके तैनात करना चाहते हैं, तो यह सुनिश्चित कर लें कि सूचकांक के बेस यूआरएल को फ़ाइल में बदल दिया जाए क्योंकि सभी रूट मैपिंग आपके द्वारा दिए गए पथ पर निर्भर करती हैं और इसे [/ branchname] पर सेट किया जाना चाहिए।

इस पेज का लिंक

https://rahulrsingh09.github.io/Deployment

गिट रेपो

https://github.com/rahulrsingh09/Deployment


1

एक कोणीय ऐप को होस्ट करने के त्वरित और सस्ते तरीके के लिए, मैं फ़र्बेस होस्टिंग का उपयोग कर रहा हूं। यह फ़र्स्ट टियर पर मुफ़्त है और फायरबेस सीएलआई का उपयोग करके नए संस्करणों को तैनात करना बहुत आसान है। यह लेख यहां आपके प्रोडक्शन कोणीय 2 ऐप को फायरबेस पर तैनात करने के लिए आवश्यक कदमों की व्याख्या करता है: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f1946bc978d

संक्षेप में, आप रन करते हैं ng build --prodजो पैकेज में एक डिस्टर्ब फोल्डर बनाता है और वह फोल्डर है जो फायरबेस होस्टिंग में तैनात हो जाता है।


धन्यवाद - यह सबसे सरल तरीका था जिसे मैं पा सकता था।
ब्रायन बर्न्स

1

एज़्योर में एंगुलर 2 को तैनात करना आसान है

  1. भागो एनजी निर्माण --prod , जो index.html सहित कुछ फ़ाइलों के अंदर बंडल सब कुछ के साथ एक जिले फ़ोल्डर उत्पन्न होगा।

  2. इसके अंदर एक संसाधन समूह और एक वेब ऐप बनाएं।

  3. एफ़टीपी का उपयोग करके अपने डिस्ट फ़ोल्डर फ़ाइलों को रखें। Azure में यह एप्लिकेशन चलाने के लिए index.html की तलाश करेगा।

बस। आपका ऐप चल रहा है!


केवल अगर आप कोणीय-क्ली नं के साथ अपनी परियोजना शुरू करते हैं?
पोर्टेकॉय

उस तरह नही। यदि आपने कोणीय-क्ली का उपयोग करके अपनी कोणीय 2 परियोजना शुरू नहीं की है, तो आप उत्पादन के लिए परियोजना का निर्माण कर सकते हैं। केवल निर्माण के समय आपको अपनी मशीन में कोणीय-क्लि स्थापित करना होगा। विश्व स्तर पर कोणीय-cli स्थापित करने के लिए npm install -g @ angular / cli का उपयोग करें।
मालतेश पाटिल

1

2017 के रूप में सबसे अच्छा तरीका है कोणीय-क्ली (v1.4.4) का उपयोग आपके कोणीय परियोजना के लिए।

ng build --prod --env=prod --aot --build-optimizer --output-hashing none

आपको इसके बारे में स्पष्ट रूप से जोड़ने की आवश्यकता नहीं है - क्योंकि यह डिफ़ॉल्ट रूप से --prod के साथ चालू है। और --output-hashing का उपयोग कैश के फटने के बारे में आपकी व्यक्तिगत पसंद के अनुसार है।

आप स्पष्ट रूप से जोड़कर सीडीएन समर्थन जोड़ सकते हैं:

 --deploy-url "https://<your-cdn-key>.cloudfront.net/"

यदि आप होस्टिंग के लिए सीडीएन का उपयोग करने की योजना बना रहे हैं जो काफी तेज है।


1

कोणीय सीएलआई के साथ , आप निम्नलिखित कमांड का उपयोग कर सकते हैं:

ng build --prod

यह एक डिस्टर्ब फोल्डर उत्पन्न करता है जिसके साथ आपको एप्लिकेशन को तैनात करना होगा।

यदि आपके पास वेब सर्वर के साथ कोई अभ्यास नहीं है, तो मैं आपको सलाह देता हूं कि आप कोणीय से क्लाउड तक का उपयोग करें । आपको सिर्फ डिस्टर्ब फोल्डर को जिप फाइल के रूप में कम्प्रेस करके प्लेटफॉर्म में अपलोड करना होगा।


1

मैं कहता हूं कि कोणीय से पहले वेब अनुभव वाले बहुत से लोग, एक युद्ध (यानी jquery और html एक जावा / स्प्रिंग प्रोजेक्ट के अंदर) के भीतर अपनी वेब कलाकृतियों को तैनात करने के लिए उपयोग किए जाते हैं। मैंने अपने कोणीय और REST प्रोजेक्ट को अलग रखने के प्रयास के बाद, कॉर्स मुद्दे के आसपास पाने के लिए ऐसा करना समाप्त कर दिया।

मेरा समाधान सीएलआई के साथ उत्पन्न सभी कोणीय (4) सामग्री को स्थानांतरित करने के लिए था, मेरे ऐप से MyJavaApplication / कोणीय तक। तब मैंने अपने मावेन बिल्ड को अपने वितरण की जड़ / कोणीय / दूर से सामग्री (यानी $ project.build.directory} / MyJavaApplication) को स्थानांतरित करने के लिए maven-resource-plugin का उपयोग करने के लिए संशोधित किया। कोणीय डिफ़ॉल्ट रूप से युद्ध की जड़ से संसाधनों को लोड करता है।

जब मैंने अपने कोणीय प्रोजेक्ट में रूटिंग जोड़ना शुरू कर दिया, तो मैंने और अधिक वेबपेज कॉपी करने के लिए index.html को कॉपी / WEB-INF / app से / दूर करना शुरू कर दिया। और, एक जावा कंट्रोलर जोड़ा जो सभी सर्वर साइड रेस्ट कॉल को इंडेक्स पर रीडायरेक्ट करता है।


-1

बस नीचे दिए गए लिंक का पालन करें,

अपना Index.html पृष्ठ स्क्रिप्ट फ़ाइल पथ परिवर्तित करें अपने घटक को बदलें। पथ को आपकी त्रुटि मिल रही है जो स्थान नहीं ढूँढ सका

https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy

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