मैं HTML5 मोड में एक AngularJS एप्लिकेशन को पुनः प्राप्त करने वाले URL के लिए IIS कैसे कॉन्फ़िगर करूं?

140

मेरे पास AngularJS बीज परियोजना है और मैंने इसे जोड़ा है

$locationProvider.html5Mode(true).hashPrefix('!');

app.js फ़ाइल के लिए। मैं सभी अनुरोधों को रूट करने के लिए IIS 7 को कॉन्फ़िगर करना चाहता हूं

http://localhost/app/index.html

ताकि यह मेरे लिए काम करे। मैं यह कैसे करु?

अपडेट करें:

मैंने अभी-अभी IIS URL रिवाइराइट मॉड्यूल को खोजा, डाउनलोड और इंस्टॉल किया है , उम्मीद है कि यह मेरे लक्ष्य को प्राप्त करना आसान और स्पष्ट कर देगा।

अपडेट 2 :

मुझे लगता है कि इस रकम को मैं हासिल करने की कोशिश कर रहा हूं ( AngularJS डेवलपर प्रलेखन से लिया गया ):

इस मोड का उपयोग करने के लिए सर्वर साइड पर URL पुनर्लेखन की आवश्यकता होती है, मूल रूप से आपको अपने आवेदन के प्रवेश बिंदु के लिए अपने सभी लिंक को फिर से लिखना होगा (जैसे index.html)

अपडेट 3:

मैं अभी भी इस पर काम कर रहा हूं और मुझे पता है कि मुझे कुछ URL जैसे पुनर्निर्देशित (नियम फिर से लिखने) की आवश्यकता नहीं है

http://localhost/app/lib/angular/angular.js
http://localhost/app/partials/partial1.html

कुछ भी ऐसा है जो css, js, lib या partials निर्देशिकाओं में पुनर्निर्देशित नहीं है। बाकी सभी चीज़ों को ऐप / index.html पर पुनर्निर्देशित करना होगा

किसी को पता है कि हर एक फ़ाइल के लिए एक नियम जोड़ने के बिना आसानी से इसे कैसे प्राप्त किया जाए?

अपडेट 4:

मेरे पास आईआईएस यूआरएल रिवाइटर मॉड्यूल में 2 इनबाउंड नियम हैं। पहला नियम है:

IIS URL उल्टा नियम 1

दूसरा नियम है:

IIS URL उल्टा नियम 2

अब जब मैं लोकलहोस्ट / ऐप / व्यू 1 में नेविगेट करता हूं, तो यह पेज को लोड करता है, हालांकि सहायक फाइलें (सीएसएस, जेएस, लिब और पार्टिसिपल डायरेक्टरी में मौजूद) भी ऐप / index.html पेज पर फिर से लिखी जा रही हैं - इसलिए सब कुछ आ रहा है index.html पेज के रूप में कोई फर्क नहीं पड़ता कि URL का उपयोग किया जाता है। मुझे लगता है कि इसका मतलब मेरा पहला नियम है, जो इन URLs को दूसरे नियम से संसाधित होने से रोकने वाला है, काम नहीं कर रहा है .. कोई विचार? ...किसी को? ...मुझे बहुत ज्यादा अकेलापन महसूस हुआ... :-(

iis url-rewriting angularjs

— डीन
स्रोत

इसके लिए धन्यवाद! बहुत मददगार!

— ऐश क्लार्क

दूसरा नियम महत्वपूर्ण है: आपको यह सुनिश्चित करने की आवश्यकता है कि यह उस पृष्ठ को स्पष्ट रूप से चालू करने app/index.htmlऔर न app/ करने के लिए है जो उस पृष्ठ को ट्रिगर करता है जो AngularJS पर कार्य करता है। इससे पहले कि मैं यह पता लगाता मैं अपने जीवन के 2 घंटे खो दिया। :-)

— डेक्सटर लेगास्पि

ASP.NET MVC का उपयोग करने का एक और तरीका है और RouteConfig.cs: मार्गों में जोड़ें। नाम: "डिफ़ॉल्ट", url: "{* कुछ भी" ", चूक: नया {नियंत्रक =" होम ", एक्शन =" सूचकांक ", }; और आपका होमकंट्रोलर इंडेक्स सिर्फ फाइल लौटाता है ("~ / index-anyhinghere.html", "text / html"); तब आपका ऐप IIS स्वतंत्र हो जाता है

— टूलकिट

मुझे "वेब इंस्टालर" से "URL फिर से लिखना मॉड्यूल" स्थापित करना था। यदि url फिर से मॉड्यूल नहीं लिखता है, तो फिर से लोड करते समय, फिर से लिखना काम नहीं करेगा। INSTALL URL फिर से लिखना मॉड्यूल। :)

— बिमल दास

289

मैं $locationProvider.html5Mode(true)सेट होने के बाद web.config में एक नियम लिखता हूं app.js।

आशा है, किसी की मदद करता है।

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

अपने index.html में मैंने इसे जोड़ा है <head>

<base href="/">

सर्वर पर IIS URL पुनर्लेखन स्थापित करना न भूलें ।

यदि आप वेब API और IIS का उपयोग करते हैं, तो यह तब काम करेगा जब आपका API www.yourdomain.com/apiतीसरे इनपुट (कंडीशन की तीसरी लाइन) के कारण हो।

— यागीज़ ओज़टर्क
स्रोत

2

यह बहुत उपयोगी था और मैंने इसे सबसे पूर्ण पाया। धन्यवाद!

— मारियो

2

खुशी है कि यह

— Yagiz Ozturk

5

उत्तम! यह मेरे लिए एक कठिन मुद्दा था, इस पर काम करने में घंटे बिताए। धन्यवाद! किसी और के लिए सलाह: मैंने index.html को <Action type = "urrite" url "/index.html" /> में जोड़ा, फिर मेरे index.html (Angular SPA के लिए रूट डायरेक्टरी फ़ाइल, <आधार href = "/ index पर जोड़ा। । html "/> जब मैंने ऊपर कोड कॉपी किया था, तो यह मेरे <आधार href /> से मेल नहीं खाता था, इसलिए यह सही तरीके से काम नहीं करता था। विशाल प्रॉप्स" / (एपीआई) पैटर्न के लिए भी था, मैं उस हिस्से को ठोकर मारता रहा।

— ब्रैड मार्टिन

क्या होगा अगर मैं एज़्योर वेब साइटों पर होस्ट करता हूं?

— टूलकिट

7

यह एक मजाक है कि हमें कोणीय मार्ग के लिए इन हुप्स से कूदना होगा। यह मेरे लिए कोणीय मार्ग को मारता है। क्या झंझट है।

— user441521

38

IIS इनबाउंड नियम जैसा कि प्रश्न में दिखाया गया है काम करते हैं। मुझे ब्राउज़र कैश को साफ़ करना था और <head>index.html पेज के मेरे अनुभाग के शीर्ष में निम्नलिखित पंक्ति जोड़ना था :

<base href="/myApplication/app/" />

ऐसा इसलिए है क्योंकि मेरे पास लोकलहोस्ट में एक से अधिक एप्लिकेशन हैं और इसलिए localhost/app/view1इसके बदले अन्य पार्टिकल्स से अनुरोध किए जा रहे हैंlocalhost/myApplication/app/view1

उम्मीद है कि यह किसी की मदद करता है!

— डीन
स्रोत

1

मुझे इसकी आवश्यकता नहीं थी, लेकिन प्रश्न संपादन बहुत अच्छा था। धन्यवाद!

— ऐश क्लार्क

2

इसके अलावा यह उपयोगी हो सकता है। पृष्ठ पुनः लोड करते समय मेरे लिए काम किया। हर फ़ाइल के लिए कोई विशेष नियम के बिना: coderwall.com/p/mycbiq

— Per G

जैसा कि @ ash-clarke ने कहा, यह आवश्यक नहीं है, लेकिन वैसे भी यह अच्छा अभ्यास है क्योंकि यह पृष्ठ के लिंक को अज्ञेय होने देता है जिसके बारे में "उपनिर्देशिका" है।

— डेक्सटर लेगास्पी

@PerG मैं उपरोक्त समाधान में काम कर रहा था लेकिन पुनः लोड पर नहीं, यहाँ मेरा कोड है: stackoverflow.com/questions/25644287/iis-url-rewrite-rules कोई विचार?

— amcdnl

मुझे नहीं पता है या कुछ कॉलों को हटाने की कोशिश की है। एक तरह से आसपास अन्य डोमेन आदि पर एपीआई होगा, लेकिन शायद यह यू के लिए एक समाधान नहीं है। लेकिन आप ऊपर दिए मेरे लिंक में पूछ सकते हैं। और शायद लेखक आपको जवाब दे सकता है?

— प्रति

11

मेरे मामले में मुझे सही पुनर्लेखन नियम स्थापित करने के बाद 403.14 मिलते रहे। यह पता चला कि मेरे पास एक निर्देशिका थी जो मेरे URL मार्गों में से एक के समान नाम थी। एक बार जब मैंने IsDirectory को फिर से लिखना नियम हटा दिया तो मेरे मार्गों ने सही तरीके से काम किया। क्या ऐसा मामला है जहां निर्देशिका की उपेक्षा को दूर करने से समस्याएं हो सकती हैं? मैं अपने मामले में किसी के बारे में नहीं सोच सकता। एकमात्र ऐसा मामला है जिसके बारे में मैं सोच सकता हूं कि क्या आप अपने ऐप के साथ निर्देशिका ब्राउज़ कर सकते हैं।

<rule name="fixhtml5mode" stopProcessing="true">
  <match url=".*"/>
  <conditions logicalGrouping="MatchAll">
    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
  </conditions>
  <action type="Rewrite" url="/" />
</rule>

— जोश सी
स्रोत

10

केवल इन दो शर्तों के साथ समस्या:

  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />

यह है कि वे केवल तब तक काम करते हैं जब तक {REQUEST_FILENAME} डिस्क पर भौतिक रूप से मौजूद है । इसका मतलब यह है कि ऐसे परिदृश्य हो सकते हैं जहां गलत तरीके से नामांकित आंशिक दृश्य के लिए अनुरोध 404 के बजाय रूट पृष्ठ को लौटाएगा जिससे कोणीय को दो बार लोड किया जाएगा (और कुछ परिदृश्यों में यह एक अनंत अनंत लूप का कारण बन सकता है)।

इस प्रकार, कुछ सुरक्षित "फॉलबैक" नियमों को समस्याओं का निवारण करने के लिए इन कठिन मुद्दों से बचने की सिफारिश की जाएगी:

  <add input="{REQUEST_FILENAME}" pattern="(.*?)\.html$" negate="true" />
  <add input="{REQUEST_FILENAME}" pattern="(.*?)\.js$" negate="true" />
  <add input="{REQUEST_FILENAME}" pattern="(.*?)\.css$" negate="true" />

या ऐसी स्थिति जो किसी फ़ाइल के समाप्त होने से मेल खाती है :

<conditions>
  <!-- ... -->
  <add input="{REQUEST_FILENAME}" pattern=".*\.[\d\w]+$" negate="true" />
</conditions>

— सिप्रियन तीसानु
स्रोत

1

इस सब के साथ मेरी जगह पर मेरा लोड ठीक-ठाक है, लेकिन अगर मेरे पास कोई रास्ता है तो मेरे पास मुद्दे हैं। इस प्रकार, अगर मेरे ब्राउज़र में पथ है: 10.34.34.46/jbvdev/documents/BC498484 प्रारंभ में यह ठीक दिखाई देता है, लेकिन अगर मैं ताज़ा करता हूं, तो सब कुछ टूट जाता है क्योंकि यह 10.34.34.46/jbvdev/documents पर css और js की तलाश शुरू करता है / css या 10.34.34.46/jbvdev/documents/js क्या कोई जानता है कि इसे कैसे हल किया जाए?

— माइकल महोनी

1

सबसे आसान तरीका मैंने पाया है कि ग्राहक को 404 ट्रिगर करने वाले अनुरोधों को पुनर्निर्देशित करना है। यह $locationProvider.html5Mode(true)सेट होने पर भी हैशटैग जोड़कर किया जाता है।

यह ट्रिक एक ही वेब साइट पर अधिक वेब एप्लिकेशन के साथ वातावरण के लिए काम करती है और URL अखंडता बाधाओं (ईजी बाहरी प्रमाणीकरण) की आवश्यकता होती है। यहाँ कदम से कदम कैसे करना है

index.html

<base>तत्व को ठीक से सेट करें

<base href="@(Request.ApplicationPath + "/")">

web.config

किसी कस्टम पेज पर पहले 404 को रीडायरेक्ट करें, उदाहरण के लिए "होम / एरर"

<system.web>
    <customErrors mode="On">
        <error statusCode="404" redirect="~/Home/Error" />
    </customErrors>
</system.web>

होम कंट्रोलर

ActionResultक्लाइंटसाइड रूट में इनपुट को "ट्रांसलेट" करने के लिए एक सरल लागू करें ।

public ActionResult Error(string aspxerrorpath) {
    return this.Redirect("~/#/" + aspxerrorpath);
}

यह सबसे सरल तरीका है।

यह संभव है (सलाह योग्य?) 404 पर क्लाइंट को रीडायरेक्ट करने के लिए कुछ बेहतर लॉजिक के साथ एरर फंक्शन को बढ़ाने के लिए जब url वैध हो और 404 को सामान्य रूप से ट्रिगर होने दें जब क्लाइंट पर कुछ भी नहीं मिलेगा। मान लीजिए कि आपके पास ये कोणीय मार्ग हैं

.when("/", {
    templateUrl: "Base/Home",
    controller: "controllerHome"
})
.when("/New", {
    templateUrl: "Base/New",
    controller: "controllerNew"
})
.when("/Show/:title", {
    templateUrl: "Base/Show",
    controller: "controllerShow"
})

URL को क्लाइंट को केवल तब ही रीडायरेक्ट करता है जब वह "/ नई" या "/ शो /" से शुरू होता है

public ActionResult Error(string aspxerrorpath) {
    // get clientside route path
    string clientPath = aspxerrorpath.Substring(Request.ApplicationPath.Length);

    // create a set of valid clientside path
    string[] validPaths = { "/New", "/Show/" };

    // check if clientPath is valid and redirect properly
    foreach (string validPath in validPaths) {
        if (clientPath.StartsWith(validPath)) {
            return this.Redirect("~/#/" + clientPath);
        }
    }

    return new HttpNotFoundResult();
}

यह केवल बेहतर तर्क का एक उदाहरण है, निश्चित रूप से हर वेब एप्लिकेशन की अलग-अलग आवश्यकताएं हैं

— Naigel
स्रोत

1

मैं एक सरल कोणीय 7 अनुप्रयोग, एक एज़्योर वेब ऐप पर तैनात करने की कोशिश कर रहा हूं। जब तक आप पृष्ठ को ताज़ा नहीं करते, तब तक सब कुछ ठीक रहा। ऐसा करते हुए, मुझे 500 त्रुटि वाली सामग्री के साथ प्रस्तुत किया गया। मैंने कोणीय डॉक्स और अच्छे मंचों पर लगभग दोनों में पढ़ा है, कि मुझे अपने तैनात समाधान में एक web.config फ़ाइल जोड़ने की जरूरत है और यह सुनिश्चित करें कि index.html फ़ाइल में नियम को फिर से लिखें। हताशा और परीक्षण और त्रुटि परीक्षणों के घंटों के बाद, मैंने पाया है कि त्रुटि काफी सरल थी: मेरी फ़ाइल मार्कअप के आसपास एक टैग जोड़ना।

— केल्सन मार्टिंस
स्रोत

1

मेरे पास एंगुलर के साथ एक समान मुद्दा था और आईआईएस ने मैनुअल रिफ्रेश पर 404 स्टेटस कोड फेंक दिया और सबसे ज्यादा वोट देने वाले समाधान की कोशिश की, लेकिन यह मेरे लिए काम नहीं आया। WebDAV और बदलते हैंडलर से निपटने और कोई भी काम नहीं करने वाले अन्य समाधानों की एक गुच्छा की कोशिश की।

सौभाग्य से मुझे यह समाधान मिला और यह काम कर गया (ऐसे भागों को निकाल दिया जिनकी मुझे आवश्यकता नहीं थी)। इसलिए यदि उपरोक्त में से कोई भी आपके लिए काम नहीं करता है या उन्हें आज़माने से पहले भी यह कोशिश करता है और देखें कि क्या यह आईस मुद्दे पर आपकी कोणीय तैनाती को ठीक करता है।

अपनी साइट के रूट डायरेक्टरी में अपने वेबकॉन्फ़िग में स्निपेट जोड़ें। मेरी समझ से, यह किसी भी वंशानुक्रम (Applicationhost.config, machine.config) से 404 स्टेटस कोड को हटा देता है, फिर साइट स्तर पर 404 स्टेटस कोड बनाता है और होम पेज पर कस्टम 403 पेज के रूप में रीडायरेक्ट करता है।

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Custom">
      <remove statusCode="404"/>
      <error statusCode="404" path="/index.html" responseMode="ExecuteURL"/>
    </httpErrors>
  </system.webServer>
</configuration>

— मेल्विन गे
स्रोत