कोणीय-क्ली बिल्ड फ़ोल्डर संरचना

Question

डिफ़ॉल्ट कोणीय-क्ली बिल्ड बहुत ही फ्लैट संरचना - संपत्ति फ़ोल्डर और जेएस, एचटीएमएल फाइलों के साथ dist फ़ोल्डर उत्पन्न करता है। क्या fe बनाने का कोई तरीका है। स्क्रिप्ट फ़ोल्डर और बिल्ड प्रक्रिया के दौरान सभी जेएस फाइलों को डाल दिया?

Answer 1

सीएलआई अभी तक इसका पूरी तरह से समर्थन नहीं करता है, लेकिन यह आपको वहां से अधिक तरीके से प्राप्त करने के लिए कुछ उपयोगी टूल प्रदान करता है। सर्वलेट-मैपिंग के माध्यम से जोड़े गए जटिलता की मात्रा को कम करने की कोशिश करते समय मुझे अपने कोणीय अनुप्रयोग को एक युद्ध के साथ तैनात करने की आवश्यकता थी। इस प्रश्न में विशेष रूप से जे 2 ईई का उल्लेख नहीं है, लेकिन मुझे लगता है कि इस समाधान के सिद्धांतों को विभिन्न वातावरणों में साझा किया जा सकता है।

---

प्रासंगिक ng build पैरामीटर:

• --deploy-url: पथ मानचित्रण जो संसाधनों के लिए लागू किया जाएगा। यह शायद एंगुलर-सीएलआई के करीब है जो आप वर्तमान में प्राप्त कर रहे हैं।
• --output-path: कोणीय निर्माण के लिए आउटपुट निर्देशिका को निर्दिष्ट करता है (विशेष रूप से, मैंने विभिन्न परिवेशों के लिए अद्वितीय आउटपुट निर्देशिकाओं को नामित करने के लिए इसका उपयोग किया, क्योंकि एप्लिकेशन को विभिन्न कॉन्फ़िगरेशन के साथ एकाधिक लक्ष्यों पर तैनात किया जा रहा है)।
• --base-href: आवेदन के लिए रूट यूआरआई। 0.gके लिए उदा। /angular-app/। यह <base href="<uri>"> हेड टैग सेट करता है और गैर-हैश रूटिंग के लिए आवश्यक है। यह अन्य चीजों के लिए भी आवश्यक हो सकता है।

आपके लिए सबसे दिलचस्प एक शायद --deploy-url है। यदि आप /dist/ का एक तैनाती यूआरएल सेट करते हैं, उदाहरण के लिए, तो आपके निर्मित एप्लिकेशन में जेएस फाइलों के संदर्भ /dist/ के साथ प्रीफ़िक्स किए जाएंगे। इस विधि को

---

दो बड़े कैच:

• --deploy-url जे एस फ़ाइलों के लिए उत्पादन पथ नहीं बदलता है। यह केवल जेएस फाइलों के संदर्भों को बदलता है। फाइलें अभी भी रूट बिल्ड निर्देशिका में रखी जाएंगी। मैन्युअल रूप से इसे ठीक करने के लिए आपको अपनी बिल्ड प्रक्रिया में एक कदम जोड़ना होगा।
• --deploy-url किसी अन्य संपत्ति के लिए काम नहीं कर रहा है। मैं अपनी सभी अन्य संपत्तियों को assets/ निर्देशिका में रखता हूं, और निर्मित आउटपुट अभी भी assets/<path> (dist/assets/<path> वांछित के रूप में) के माध्यम से संपत्तियों को संदर्भित करता है। आप वर्चुअल निर्देशिका या यूआरएल पुनः लिखकर इसे चारों ओर काम कर सकते हैं।

---

संदर्भ के लिए, युद्ध के लिए मेरे जिसके परिणामस्वरूप निर्देशिका संरचना है:

app/ 
    dist/ <-- Deployed Angular application 
     assets/ 
      (images, CSS, etc) 
     *.js 
     (other assets pulled into the root path, e.g. *.(svg|eot|woff|woff2|ttf) from Font Awesome) 
     index.html 
    WEB-INF/ 
    ... 
    index.jsp 

ये कदम मैं इस संरचना का निर्माण करने के लिए ले रहे हैं:

1. ng build -pr false --prod --output-path build/node-prod --base-href /angular-app/ --deploy-url /angular-app/dist/।
2. एक ग्रेडल निर्देशिका के माध्यम से WAR बिल्ड निर्देशिका app/dist पर build/node-prod की सामग्री कॉपी करें।
3. प्वाइंट index.jsp से index.html सामग्री <%@include file="dist/index.html"%> के माध्यम से।
4. पथ /dist/* और /assets/* पथों के लिए डिफ़ॉल्ट सर्वलेट (स्थिर संपत्ति) के लिए सर्वलेट-मैपिंग जोड़ें।
5. http://tuckey.org/urlrewrite/^/assets/(.*)$ से /dist/assets/$1 (या httpd, nginx, आदि के माध्यम से) के लिए URL-mapping जोड़ें। अन्य संपत्तियों के लिए काम नहीं कर रहे --deploy-url के लिए ऊपर दिए गए कैच की वजह से इसकी आवश्यकता है।
6. (वैकल्पिक) ^/dist/index.html$ के लिए dist यूआरआई के माध्यम से ऐप तक पहुंचने से रोकने के लिए रूट संदर्भ पथ पर 301 या 302 रीडायरेक्ट जोड़ें।

परिणामी वेबएप में, http://localhost/angular-app/ मेरे आवेदन के लिए एकमात्र वैध अंतराल है। यह एंडपॉइंट index.jsp पर इंगित करता है, जिसमें index.html की सामग्री शामिल है, जो <script src="/angular-app/dist/<some-file>.js"></script> टैग के माध्यम से प्रासंगिक जेएस लोड करता है।

जब कोई अन्य संपत्ति आवश्यक है, जैसे लोगो छवि, पृष्ठ assets/<file-name> का अनुरोध करता है, जिसे टकी के माध्यम से सर्वर-साइड को dist/assets/<file-name> पर फिर से लिखा जाता है, पारदर्शी रूप से अनुरोधित संपत्ति को हल करता है।

इस समाधान के बारे में अच्छी बात यह है कि हम सब कुछ कि ng build जड़ युद्ध पथ में निर्मित डाल करने के लिए बिना जड़ संदर्भ में कोणीय आवेदन को तैनात करने में सक्षम थे। यह विशेष रूप से अच्छा है क्योंकि हम वैश्विक सर्वलेट मैपिंग (उदा।, *.js) जोड़ना नहीं चाहते हैं, जब उन्हें टाला जा सके।