मैं अपने एंगुलरजेएस एसपीए को वीएस 2015 वेब विकास पर्यावरण पर कैसे चला सकता हूं, ठीक से रीफ्रेश करें

Question

मेरे पास एक एंगुलरजेएस एसपीए एप्लिकेशन है जिसे मैंने विजुअल स्टूडियो 2015 का उपयोग करके विकसित किया है। जब मैं प्रकाशित करता हूं तो यह index.html प्रकाशित करता है और ठीक काम करता है। हालांकि अगर मैं एक पेज पर हूं और मैं रीफ्रेश पर क्लिक करता हूं तो यह एसपीए पेज जैसे रीफ्रेश करने की कोशिश करता है जैसे example.com/home/about। यह विफल रहता है क्योंकि मेरे पास घर/पृष्ठ नहीं है।

क्या कोई तरीका है कि मैं अपनी वेब.कॉन्फिग फ़ाइल (केवल स्थानीय परीक्षण के लिए) को संशोधित कर सकता हूं ताकि यह वास्तव में index.html (लोड हो जाए) और फिर/घर/राज्य के लिए जा सके?

<configuration> 
    <system.web> 
    <compilation debug="true" targetFramework="4.5" /> 
    <httpRuntime targetFramework="4.5" /> 
    </system.web> 
</configuration> 

Answer 1

यह आप html5mode उपयोग कर रहे हैं लगता है:

यहाँ मेरे वर्तमान web.config है। यूआरएल को सर्वर से अनुरोध करने से बदलने के लिए इस मामले में # नहीं है। इस कॉन्फ़िगरेशन के साथ, आपको सर्वर से मदद की आवश्यकता है। जब यह आपके एसपीए मार्गों से अनुरोध प्राप्त करता है तो यह index.html की सेवा करेगा।

यह SO answer यूआरएल web.config पर पुनर्लेखन कॉन्फ़िगर करने के विवरणों है:

नियमों से जाना:

<system.webServer> 
    <rewrite> 
     <rules> 
     <rule name="AngularJS Routes" stopProcessing="true"> 
      <match url=".*" /> 
      <conditions logicalGrouping="MatchAll"> 
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
      <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> 
      </conditions> 
      <action type="Rewrite" url="/" /> 
     </rule> 
     </rules> 
    </rewrite> 
    </system.webServer> 

यह मान लिया गया है कि आपके API किया जा रहा है: /api और किसी भी निर्देशिका के लिए या फ़ाइल है कि यह पाता है, यह के रूप में कार्य करता है। कुछ और, / पर फिर से लिखा गया है जिसमें डिफ़ॉल्ट दस्तावेज़index.html पर कॉन्फ़िगर किया गया है, आपको एसपीए लोड करेगा।

इसके अलावा, आप आईआईएस (IIS Express doesn't need the module)

एक अन्य विकल्प इन हल्के HTTP सर्वर NPM संकुल में से एक है के लिए URL Rewrite module स्थापित करने की आवश्यकता पर ध्यान दें। John Papa has one: lite-server। यह BrowserSync का उपयोग करता है हुड के नीचे:

BrowserSync क्या हम एक सुपर तेजी से हल्के विकास सर्वर में चाहते हैं के सबसे करता है। यह स्थिर सामग्री परोसता है, परिवर्तनों का पता लगाता है, ब्राउज़र को रीफ्रेश करता है, और कई अनुकूलन प्रदान करता है।

एसपीए बनाने के दौरान ऐसे मार्ग हैं जो केवल ब्राउज़र के लिए जाने जाते हैं। उदाहरण के लिए,/ग्राहक/21 कोणीय ऐप के लिए क्लाइंट साइड रूट हो सकता है। यदि यह मार्ग मैन्युअल रूप से दर्ज किया गया है या सीधे से जुड़ा हुआ है, तो कोणीय ऐप (उर्फ एक गहरी लिंक) के प्रवेश बिंदु के रूप में स्थिर सर्वर अनुरोध प्राप्त करेगा, क्योंकि कोणीय अभी तक लोड नहीं हुआ है। सर्वर को मार्ग के लिए कोई मिलान नहीं मिलेगा और इस प्रकार 404 लौटाएगा। इस मामले में वांछित व्यवहार index.html (या जो हमने परिभाषित किया है) के किसी भी प्रारंभिक पृष्ठ को वापस करना है। BrowserSync स्वचालित रूप से फ़ॉलबैक पृष्ठ की अनुमति नहीं देता है। लेकिन यह कस्टम मिडलवेयर की अनुमति देता है। यह वह जगह है जहां लाइट-सर्वर कदम

लाइट-सर्वर को SPAs की सेवा करना आसान बनाने के लिए ब्राउज़र सिंक के चारों ओर एक साधारण अनुकूलित रैपर है।