कोणीय 2.0 राउटर ब्राउज़र को पुनः लोड करने पर काम नहीं कर रहा है

190

मैं Angular 2.0.0-alpha.30 संस्करण का उपयोग कर रहा हूं। जब एक अलग मार्ग पर पुनर्निर्देशित किया जाता है, तो ब्राउजर को रिफ्रेश करें, इसके शो नॉट जीईटी / रूट।

क्या आप यह अनुमान लगाने में मेरी मदद कर सकते हैं कि यह त्रुटि क्यों हुई।

angular  angular2-routing 
— Vinz और Tonz
स्रोत
1
मुझे लगता है कि यह stackoverflow.com/questions/16569841
— गुंटर Zöchbauer
उत्तर के लिए धन्यवाद, लेकिन यह एक कोणीय 1.x संस्करणों के लिए है। मैं कोणीय 2.0 में समस्या का सामना कर रहा हूं।
— विंज़ और टोनज़
1
जुड़ा हुआ प्रश्न एक सामान्य समस्या है जिसमें पुशस्टैट नहीं है जो कि कोणीय विशिष्ट है। आपका प्रश्न यह जानने के लिए पर्याप्त जानकारी प्रदान नहीं करता है कि क्या यह संबंधित है।
— गुंटर ज़ोचबॉयर
5
कोणीय 2.0 एक पूरी तरह से नए राउटर का उपयोग करता है, इसलिए लिंक किए गए पोस्ट का अब पुराने राउटर
— विन्ज और टोनज़
जैसा कि मैंने कहा कि अगर यह पुशस्टैट मुद्दा है तो यह कोणीय विशिष्ट नहीं है और इसे कोणीय द्वारा तय नहीं किया जा सकता है लेकिन इसके बजाय सर्वर पर तय किया जाना चाहिए।
— गुंटर ज़ोचबॉयर

जवाबों:

141

आप जो त्रुटि देख रहे हैं, वह इसलिए है क्योंकि आप http: // लोकलहोस्ट / रूट का अनुरोध कर रहे हैं जो मौजूद नहीं है। साइमन के अनुसार ।

HTML5 रूटिंग का उपयोग करते समय आपको अपने सर्वर साइड में index.html में अपने ऐप के सभी मार्गों (वर्तमान में 404) को मैप करने की आवश्यकता होती है । यहां आपके लिए कुछ विकल्प दिए गए हैं:

  1. लाइव-सर्वर का उपयोग कर: https://www.npmjs.com/package/live-server

    $live-server --entry-file=index.html`

  2. nginx का उपयोग कर: http://nginx.org/en/docs/beginners_guide.html

    error_page 404 /index.html

  3. टॉमकैट - web.xml का कॉन्फ़िगरेशन। से Kunin की टिप्पणी

    <error-page>
      <error-code>404</error-code>
      <location>/index.html</location>
</error-page>
— क्व तांग
स्रोत
1
चूंकि html5 राउटिंग के लिए सर्वर साइड सपोर्ट की जरूरत होती है इसलिए यह पूरी तरह से अच्छी तरह से काम करता है। थैंक्स
— प्रभात
क्या मैं nginx को प्रॉक्सी के रूप में उपयोग कर सकता हूं pub serve? इस तरह मुझे pub buildविकास के दौरान बहुत कुछ करने की आवश्यकता नहीं है । मैंने कोशिश की, लेकिन proxy_passबहुत अच्छी तरह से काम नहीं करता है error_page।
— फ्रेंकलिन यू
@FranklinYu मैंने इसे पहले नहीं किया है। क्या आप इसे हल करते हैं?
— क्वि तांग
1
नगीनक्स का उपयोग करना। , error_page 404 /index.html ऐप के स्थान पर मेरे लिए काम किया। धन्यवाद।
— रिचर्ड के। कैंपियन
2
बिलाव - web.xml <त्रुटि पेज> <त्रुटि कोड> 404 </ त्रुटि कोड> <स्थान> /index.html </ स्थान> </ त्रुटि पेज> के विन्यास
— एक Kunin
65

डिस्क्लेमर: यह फिक्स अल्फा 44 के साथ काम करता है

मेरे पास एक ही मुद्दा था और इसे Angular.io API पूर्वावलोकन में सूचीबद्ध HashLocationStrategy को लागू करके हल किया गया ।

https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html

आवश्यक निर्देशों को आयात करके शुरू करें

import {provide} from 'angular2/angular2';
import {
  ROUTER_PROVIDERS,
  LocationStrategy,
  HashLocationStrategy
} from 'angular2/router';

और अंत में, यह सब एक साथ बूटस्ट्रैप करें

bootstrap(AppCmp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

आपका मार्ग http: // localhost / # / मार्ग के रूप में दिखाई देगा और जब आप रीफ़्रेश करेंगे, तो यह उचित स्थान पर पुनः लोड हो जाएगा।

उम्मीद है की वो मदद करदे!

— SimonHawesome
स्रोत
1
यह कोड ठीक काम करेगा लेकिन इस तकनीक में someProblem है इसका उपयोग करके #URL में ऑटोमैटिकली जोड़ा जाएगा। क्या इसका उपयोग करके URL से # निकालने का कोई समाधान है?
— परदीप जैन
सहमत, मैंने यहां सूचीबद्ध "PathLocationStrategy" को लागू करने की कोशिश की , लेकिन इसे काम करने के लिए नहीं मिला। एक URL बिना #इष्टतम होगा।
— साइमन हाउर्स
हां, मैंने भी यही कोशिश की थी, PathLocationStrategyलेकिन यह मेरे लिए काम नहीं कर रहा है। या तो मैंने गलत तरीके का इस्तेमाल किया या फिर मुझे पता नहीं है कि कैसे PathLocationStrategy का उपयोग करना है।
— परदीप जैन
1
यह मेरे लिए RC1 में काम नहीं करता है। '@ कोणीय / राउटर' से LocationStrategy, HashLocationStrategy आयात करना विफल हो जाता है।
— infojolt
1
1 वर्ष से अधिक समय के बाद इस प्रश्न पर वापस आने के लिए क्षमा करें :) लेकिन क्या HashLocationStrategy उसी राउटर पथ पर बने रहने में मदद करता है? मेरे मामले में जब मैं रिफ्रेश करता हूं तो यह मुझे लोकलहोस्ट / # </ डिफ़ॉल्ट रूट> पर ले जाता है यानी होम पेज के लिए डिफॉल्ट रूट। मैं उस मौजूदा मार्ग पर कैसे जा सकता हूं जो मैं मूल रूप से उस समय था जब मैंने 'रिफ्रेश' किया था?
— राजुगडू
47

डिफ़ॉल्ट रूप से कोणीय एचटीएमएल 5 पुशस्टेट ( PathLocationStrategyकोणीय कठबोली में) का उपयोग करता है ।
आपको या तो एक सर्वर की आवश्यकता है जो सभी अनुरोधों को संसाधित करता है जैसे index.htmlआप अनुरोध कर रहे थे या आप HashLocationStrategy(मार्गों के लिए URL में # के साथ) https://angular.io/docs/ts/latest/api/common/index/HashLocationStry-class पर स्विच करते हैं । एचटीएमएल

Https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-use-htaccess/ भी देखें

HashLocationStrategyउपयोग करने के लिए स्विच करने के लिए

अद्यतन के लिए> = RC.5 और 2.0.0 अंतिम

import {HashLocationStrategy, LocationStrategy} from '@angular/common';

@NgModule({
  declarations: [AppCmp], 
  bootstrap: [AppCmp],
  imports: [BrowserModule, routes],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
]);

या कम के साथ useHash

imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true}), ...

सुनिश्चित करें कि आपके पास सभी आवश्यक आयात हैं

नए (RC.3) राउटर के लिए 

<base href=".">

404 भी पैदा कर सकता है।

इसके बदले आवश्यकता है

<base href="/">

अद्यतन के लिए = = RC.x

bootstrap(AppCmp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
  // or since RC.2
  {provide: LocationStrategy, useClass: HashLocationStrategy} 
]);

import {provide} from '@angular/core';
import {  
  PlatformLocation,  
  Location,  
  LocationStrategy,  
  HashLocationStrategy,  
  PathLocationStrategy,  
  APP_BASE_HREF}  
from '@angular/common';

> = beta.16 आयात के लिए अद्यतन बदल गया है

import {BrowserPlatformLocation} from '@angular/platform-browser';

import {provide} from 'angular2/core';
import {
  // PlatformLocation,
  // Location,
  LocationStrategy,
  HashLocationStrategy,
  // PathLocationStrategy,
  APP_BASE_HREF}
from 'angular2/router';
import {BrowserPlatformLocation} from 'angular2/src/router/location/browser_platform_location';

<बीटा। १६

import {provide} from 'angular2/core';
import {
  HashLocationStrategy
  LocationStrategy,
  ROUTER_PROVIDERS,
} from 'angular2/router';

Https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26 ब्रेक-चेंज देखें

— गुंटर ज़ोचबॉयर
स्रोत
1
धन्यवाद! से 'angular2 / कोर' आयात {प्रदान}: प्रदान कोणीय / कोर के तहत ले जाया गया है लगता है
— StrangeLoop
1
बस ध्यान दें: update for >= RC.x(RC.2) के साथ काम करता है router 3.0.0-alpha.7, लेकिन provideएनोटेट के रूप में एनोटेट किया गया है , जिसके बारे में जानकारी के बिना कि इसे किस फ़ंक्शन ने प्रतिस्थापित किया है।
— मिस्टरफुल
उपयोग{provide: SomeClass, useClass: OtherClass}
— गुंटर ज़ोचबॉयर
2
सबसे अद्यतन जवाब। कोणीय 2.4.1 के नवीनतम संस्करण के लिए मेरे पास <आधार href = "./"> था। <Base href = "/"> में परिवर्तित होने से मेरे पास मौजूद समस्या हल हो गई। किसी के लिए सहायक हो सकता है।
— सैयाफ फ़ारूक
28

मुझे लगता है कि आप जो त्रुटि देख रहे हैं, वह इसलिए है क्योंकि आपके http: // लोकलहोस्ट / रूट का अनुरोध कर रहा है जो मौजूद नहीं है। आपको यह सुनिश्चित करने की आवश्यकता है कि आपका सर्वर आपके मुख्य index.html पेज पर सभी अनुरोधों को मैप करेगा।

जैसा कि Angular 2 url के अंत में hashes का उपयोग करने के बजाय डिफ़ॉल्ट रूप से html5 रूटिंग का उपयोग करता है, पृष्ठ को ताज़ा करना एक अलग संसाधन के लिए अनुरोध की तरह दिखता है।

— साइमन
स्रोत
7
तो हम इसे कैसे ठीक करते हैं? हम मुख्य रूप से डिफ़ॉल्ट रूप से सभी अनुरोधों को कैसे मैप करते हैं? क्या यह सर्वर-निर्भर है?
— अय्याश
1
हां, आप सर्वर पर यह करेंगे कि आप किस वेब फ्रेमवर्क का उपयोग कर रहे हैं। विकल्प नीचे वर्णित के रूप में HashLocationStrategy का उपयोग करना है।
— साइमन
आपको प्रत्येक गैर-वर्तमान मार्ग में कोणीय एसपीए पुनः लोड करना होगा। क्या यह है कि इसे कैसे संभाला जाए?
— गैरी
यह तभी पुनः लोड होता है जब उपयोगकर्ता ब्राउज़र पर ताज़ा करता है, न कि तब जब उपयोगकर्ता UI के माध्यम से मार्ग बदलता है। जब उपयोगकर्ता रीफ़्रेश करता है तो वास्तव में किसी भी तरह से फिर से लोड नहीं करता है।
— वालेस होवेरी
19

यदि आप डिफ़ॉल्ट HTML स्थान रणनीति का उपयोग कर रहे हैं तो यह सभी राउटर संस्करणों में एक सामान्य स्थिति है।

क्या होता है कि ब्राउज़र बार पर यूआरएल एक सामान्य पूर्ण HTML यूआरएल है, उदाहरण के लिए http://localhost/route:।

इसलिए जब हम एंटर को ब्राउज़र बार में हिट करते हैं, तो फ़ाइल को नाम देने के लिए सर्वर पर एक वास्तविक HTTP अनुरोध भेजा जाता है route।

सर्वर के पास ऐसी फ़ाइल नहीं है, और न तो अनुरोध को संभालने और प्रतिक्रिया प्रदान करने के लिए सर्वर पर एक्सप्रेस जैसी कुछ चीज़ों को कॉन्फ़िगर किया गया है, इसलिए सर्वर 404 नहीं मिला, क्योंकि यह routeफ़ाइल नहीं खोज सका ।

हम जो चाहते हैं, वह सर्वर के लिए index.htmlसिंगल पेज एप्लिकेशन वाली फाइल को वापस करना है । फिर राउटर को /routeurl को किक करना चाहिए और url को प्रोसेस करना चाहिए और इसमें मैप किए गए कंपोनेंट को प्रदर्शित करना चाहिए।

इसलिए समस्या को ठीक करने के लिए हमें लौटने के लिए सर्वर को कॉन्फ़िगर करने की आवश्यकता है index.html (यह मानते हुए कि आपके सिंगल पेज एप्लिकेशन फ़ाइल का नाम है) यदि अनुरोध 404 नहीं मिला तो विरोध को नियंत्रित नहीं किया जा सकता है।

ऐसा करने का तरीका इस्तेमाल की जा रही सर्वर साइड तकनीक पर निर्भर करेगा। यदि इसके जावा उदाहरण के लिए आपको एक सर्वलेट लिखना पड़ सकता है, तो रेल में यह अलग होगा, आदि।

एक ठोस उदाहरण देने के लिए, यदि आप उदाहरण के लिए NodeJs का उपयोग कर रहे हैं, तो आपको इस तरह एक मिडलवेयर लिखना होगा:

function sendSpaFileIfUnmatched(req,res) {
    res.sendFile("index.html", { root: '.' });
}

और फिर इसे मिडलवेयर श्रृंखला के अंत में पंजीकृत करें:

app.use(sendSpaFileIfUnmatched);

यह index.html404 लौटाने के बजाय काम करेगा , राउटर में किक करेगा और सब कुछ उम्मीद के मुताबिक काम करेगा।

— कोणीय विश्वविद्यालय
स्रोत
यह वास्तव में मेरा मुद्दा था। यदि आप NGINX का उपयोग करते हैं, तो यह उत्तर इसे हल करने में मदद करता है: stackoverflow.com/questions/7027636/…
— नाथन
क्या जावा के लिए यह करने के लिए एक ट्यूटोरियल है? धन्यवाद।
— 000000000000000000000
13

सुनिश्चित करें कि यह आपके index.html के मुख्य तत्व में रखा गया है:

<base href="https://stackoverflow.com/">

उदाहरण Angular2 में रूटिंग और नेविगेशन प्रलेखन का उपयोग करता है के बजाय सिर में निम्न कोड (वे दस्तावेज की लाइव उदाहरण नोट में इसका कारण बताएगा):

<script>document.write('<base href="' + document.location + '" />');</script>

जब आप किसी पृष्ठ को ताज़ा करते हैं तो यह गतिशील रूप से आपके वर्तमान दस्तावेज़ के आधार href सेट करेगा। मैं इसे देख कर लोगों के लिए कुछ भ्रम पैदा कर सकता हूं, जो दस्तावेज को रोक रहा है और प्लंकर को दोहराने की कोशिश कर रहा है।

— user2263572
स्रोत
इसे साझा करने के लिए धन्यवाद। चलो बस स्पष्ट हो, यह केवल मेरे लिए काम किया जब मैंने <सिर में सभी सीएसएस लोड करने के बाद सीधे <आधार href = "/"> डाला, और किसी भी जेएस फ़ाइलों को लोड करने से पहले। मुझे आशा है कि यह किसी को भी मदद करता है
— wmehanna
मेरे पास <base href = "./"> index.html में है फिर हटा दिया गया। '' हर्फ से और यह काम किया ..
— सौरभ सोलंकी
10

यदि आप अपने AppServer को index.html के सभी अनुरोधों को संभालने के लिए कॉन्फ़िगर किए बिना ब्राउज़र में यूआरएल दर्ज करने में सक्षम होना चाहते हैं, तो आपको HashLocationStrategy का उपयोग करना होगा ।

कॉन्फ़िगर करने का सबसे आसान तरीका है:

RouterModule.forRoot(routes, { useHash: true })

के बजाय:

RouterModule.forRoot(routes)

HashLocationStrategy के साथ आपका url जैसा होना चाहिए:

http://server:port/#/path
— felipecrp
स्रोत
धन्यवाद! यह मदद करता है, लेकिन मैं #यूआरएल से नहीं चाहता , क्या हम इसे हटा सकते हैं?
— हिदायत रहमान
7

मुझे वेबपैक-देव-सर्वर का उपयोग करने में समान समस्या थी। मुझे अपने वेबपैक में devServer विकल्प जोड़ना था।

उपाय:

// in webpack
devServer: {
    historyApiFallback: true,
    stats: 'minimal'
}
— angmerica
स्रोत
जादू जादू की तरह: पी अधिक जानकारी के लिए, देखें: webpack.github.io/docs/…
— Jissay
7

यदि आप Apache या Nginx को एक सर्वर के रूप में उपयोग कर रहे हैं, तो आपको एक .htaccess(यदि पहले नहीं बनाया गया है) और "ऑन" रिवाइज़ करें

RewriteEngine On  
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html
— राकेश रॉय
स्रोत
आपका प्रश्न नहीं आया, Apache और Nginx ( nginx.com ) सर्वर पर परीक्षण किया गया यह तरीका
— राकेश रॉय
1
यह केवल अपाचे के लिए है; Nginx कॉन्फ़िगरेशन प्रारूप पूरी तरह से अलग है।
— फ्रैंकलिन यू
5

मेरा सर्वर अपाचे है, जो मैंने 404 को ठीक करने के लिए किया था जब रिफ्रेशिंग या डीप लिंकिंग बहुत सरल है। बस Apache vhost config में एक लाइन जोड़ें:

ErrorDocument 404 /index.html

ताकि किसी भी 404 त्रुटि को index.html पर पुनर्निर्देशित किया जाएगा, जिसे angular2 रूटिंग चाहिए।

संपूर्ण vhost फ़ाइल उदाहरण:

<VirtualHost *:80>
  ServerName fenz.niwa.local
  DirectoryIndex index.html
  ErrorDocument 404 /index.html

  DocumentRoot "/Users/zhoum/Documents/workspace/fire/fire_service/dist"
  ErrorLog /Users/zhoum/Documents/workspace/fire/fire_service/logs/fenz.error.log
  CustomLog /Users/zhoum/Documents/workspace/fire/fire_service/logs/fenz.access.log combined

  <Directory "/Users/zhoum/Documents/workspace/fire/fire_service/dist">
    AllowOverride All
    Options Indexes FollowSymLinks
    #Order allow,deny
    #Allow from All
    Require all granted
  </Directory>

  Header set Access-Control-Allow-Origin "*"
  Header set Access-Control-Allow-Methods "GET, POST"
  Header set Access-Control-Allow-Credentials "true"
  Header set Access-Control-Allow-Headers "Accept-Encoding"
</VirtualHost>

कोई फर्क नहीं पड़ता कि आप किस सर्वर का उपयोग कर रहे हैं, मुझे लगता है कि पूरे बिंदु से पता चल रहा है कि सर्वर को कॉन्फ़िगर करने के तरीके आपके सूचकांक में पुनर्निर्देशित 404 हैं।

— विली जेड
स्रोत
4

सर्वर कॉन्फ़िगरेशन एक एसपीए के लिए एक समाधान नहीं है, यहां तक ​​कि मुझे भी लगता है। आप एक कोणीय एसपीए को फिर से लोड नहीं करना चाहते हैं यदि कोई गलत मार्ग आता है, तो क्या आप? इसलिए मैं एक सर्वर रूट पर निर्भर नहीं रहूंगा और अन्य रूट पर रीडायरेक्ट करूंगा लेकिन हां मैं index.html को कोणीय एप पथ के कोणीय मार्गों के सभी अनुरोधों को संभालने दूंगा।

अन्यथा या गलत मार्गों के बजाय यह प्रयास करें। यह मेरे लिए काम करता है, निश्चित नहीं है लेकिन प्रगति में काम की तरह लगता है। किसी मुद्दे का सामना करते समय खुद को ठोकर मार दी।

@RouteConfig([
  { path: '/**', redirectTo: ['MycmpnameCmp'] }, 
   ...
  }
])

https://github.com/angular/angular/issues/4055

हालाँकि, अपने सर्वर फ़ोल्डरों को कॉन्फ़िगर करने और आपके पास HTML या वेब स्क्रिप्ट जो एसपीए नहीं है, तक पहुंचने के लिए याद रखें। और आप मुद्दों का सामना करेंगे। मेरे लिए जब आप जैसे मुद्दे का सामना कर रहे थे तो यह सर्वर कॉन्फ़िगरेशन और ऊपर का मिश्रण था।

— गैरी
स्रोत
4

कोणीय 5 त्वरित सुधार के लिए, app.module.ts को संपादित करें और appRoutes के{useHash:true} बाद जोड़ें ।

@NgModule(
{
  imports:[RouterModule.forRoot(appRoutes,{useHash:true})]
})
— आदेश शाह
स्रोत
3

कोणीय एप्लिकेशन एक साधारण स्थिर HTML सर्वर के साथ सेवा करने के लिए एकदम सही उम्मीदवार हैं। आपको एप्लिकेशन पेज को गतिशील रूप से लिखने के लिए सर्वर-साइड इंजन की आवश्यकता नहीं है क्योंकि कोणीय क्लाइंट-साइड पर करता है।

यदि एप्लिकेशन कोणीय राउटर का उपयोग करता है, तो आपको फ़ाइल के लिए पूछे जाने पर एप्लिकेशन के होस्ट पृष्ठ (index.html) को वापस करने के लिए सर्वर को कॉन्फ़िगर करना होगा, जिसमें यह नहीं है।

एक रूट किए गए एप्लिकेशन को "डीप लिंक" का समर्थन करना चाहिए। एक गहरा लिंक एक URL है जो ऐप के अंदर एक घटक के लिए एक पथ निर्दिष्ट करता है। उदाहरण के लिए, http://www.example.com/heroes/42 नायक विवरण पृष्ठ का एक गहरा लिंक है जो नायक को id: 42 के साथ प्रदर्शित करता है।

कोई समस्या नहीं होती है जब उपयोगकर्ता किसी चल रहे क्लाइंट के भीतर से उस URL पर नेविगेट करता है। कोणीय राउटर उस पृष्ठ और नायक के URL और मार्गों की व्याख्या करता है।

लेकिन एक ईमेल में एक लिंक पर क्लिक करके, इसे ब्राउज़र एड्रेस बार में दर्ज करना, या केवल हीरो विवरण पृष्ठ पर ब्राउज़र को रीफ्रेश करना - इन सभी कार्यों को ब्राउज़र द्वारा ही चलाया जा रहा है, चल रहे एप्लिकेशन के बाहर। ब्राउज़र राउटर को दरकिनार करते हुए उस URL के सर्वर के लिए एक सीधा अनुरोध करता है।

जब यह http://www.example.com/ के लिए अनुरोध प्राप्त करता है, तो एक स्थिर सर्वर नियमित रूप से index.html लौटाता है । लेकिन यह http://www.example.com/heroes/42 को अस्वीकार करता है और 404 लौटाता है - तब तक त्रुटि नहीं मिलती है जब तक कि इसे सूचकांक html को वापस करने के लिए कॉन्फ़िगर नहीं किया जाता है।

यदि यह समस्या उत्पादन में हुई है, तो नीचे दिए गए चरणों का पालन करें

1) अपने कोणीय अनुप्रयोग के src फ़ोल्डर में एक Web.Config फ़ाइल जोड़ें। इसमें कोड के नीचे रखें।

<configuration>
<system.webServer>
<rewrite>
    <rules>
    <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
    </rule>
    </rules>
</rewrite>
</system.webServer>
</configuration>

2) कोणीय-cli.json में इसका संदर्भ जोड़ें। कोणीय- cli.json में नीचे दिखाए अनुसार संपत्ति ब्लॉक में Web.config डालें।

"assets": [
    "assets",
    "favicon.ico",
    "Web.config"
  ],

3) अब आप उत्पादन का उपयोग करके समाधान का निर्माण कर सकते हैं 

ng build --prod

यह एक डिस्टर्ब फोल्डर बनाएगा। डिस्ट फ़ोल्डर के अंदर फाइलें किसी भी मोड पर तैनाती के लिए तैयार हैं।

— मालतेश पाटिल
स्रोत
सबसे अच्छा समाधान, कोणीय से विवरण पा सकते हैं: web.config फ़ाइल बनाते समय angular.io/guide/deployment#fallback <कॉन्फ़िगरेशन> </ कॉन्फ़िगरेशन> टैग को जोड़ना न भूलें। उत्तर Malatesh के लिए धन्यवाद।
— पलाश रॉय
3

आप इस एप्लिकेशन को माध्य एप्लिकेशन के लिए उपयोग कर सकते हैं, मैंने ईजे को व्यू इंजन के रूप में उपयोग किया है: 

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
app.use(function (req, res, next) {
    return res.render('index.html');
});

और कोणीय-cli.json में भी सेट किया गया है

"apps": [
    {
      "root": "src",
      "outDir": "views",

इसके बजाय यह ठीक काम करेगा 

app.get('*', function (req, res, next) {
    res.sendFile('dist/index.html', { root: __dirname });
 });

इसके साथ डब कॉल्स और रिटर्निंग इंडेक्स

— शोएब कुरैशी
स्रोत
1
इसने अक्टूबर 2017 में MEAN स्टैक एप्लिकेशन के लिए पूरी तरह से काम किया।
— माइंडसेक्ट टीम
2

IIS में जीवन के दौरान संघर्ष कर रहे लोगों के लिए: आधिकारिक Angular 2 डॉक्स (जो किसी ने इस थ्रेड में पोस्ट किया है? Http://blog.angular-university.io/angular2-router) पर आधारित इस समस्या को ठीक करने के लिए निम्न PowerShell कोड का उपयोग करें? )

Import-WebAdministration
# Grab the 404 handler and update it to redirect to index.html.
$redirect = Get-WebConfiguration -filter "/system.WebServer/httperrors/error[@statusCode='404']" -PSPath IIS:\Sites\LIS 
$redirect.path = "/index.html"
$redirect.responseMode = 1
# shove the updated config back into IIS
Set-WebConfiguration -filter "/system.WebServer/httperrors/error[@statusCode='404']" -PSPath IIS:\Sites\LIS -value $redirect

यह Angular 2 डॉक्स (ऊपर लिंक) में दिए गए सुझाव के अनुसार 404 /index.html फ़ाइल पर रीडायरेक्ट करता है।

— जिम ह्यूम
स्रोत
2

आप नीचे कोशिश कर सकते हैं। इससे मेरा काम बनता है!

main.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

...
export class MainComponent implements OnInit {
    constructor(private router: Router) {
        let path: string = window.location.hash;
        if (path && path.length > 0) {
            this.router.navigate([path.substr(2)]);
        }
    }

    public ngOnInit() { }
}

आप राउटर मापदंडों में विभाजित करने के लिए path.substr (2) को और बढ़ा सकते हैं। मैं कोणीय 2.4.9 का उपयोग कर रहा हूँ

— kaifeong
स्रोत
ब्राउजर रिफ्रेश से निपटने के लिए यह वास्तव में मददगार था! कोणीय 5 के लिए, मुझे window.location.pathname का उपयोग करने के लिए इसे थोड़ा संशोधित करना पड़ा, और उस मूल्य की अपेक्षा पथों से की।
— वालेस होवेरी
2

मैं बस जोड़ने .htaccess जड़ में।

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    RewriteRule ^ ./index.html
</IfModule>

यहां मैं सिर्फ डॉट 'जोड़ रहा हूं।' (मूल निर्देशिका) /index.html में ./index.html
सुनिश्चित करें कि आधार पथ में आपकी index.html फ़ाइल मुख्य निर्देशिका पथ है और प्रोजेक्ट के निर्माण में सेट है।

— हादिया विपुल
स्रोत
1

मैं अनुक्रमणिका पर पुनर्निर्देशित किए बिना HTML5 मोड में उप पृष्ठों के URL पथ को संरक्षित करना चाहता था और वहां से कोई भी समाधान मुझे नहीं बताया कि यह कैसे करना है, इसलिए मैंने इसे पूरा किया:

अपने सभी मार्गों के लिए IIS में सरल आभासी निर्देशिका बनाएं और उन्हें ऐप रूट पर इंगित करें।

इस लोकेशन टैग के साथ अपने Web.config.xml में अपने system.webServer को लपेटें, अन्यथा आपको Web.config को दूसरी बार वर्चुअल निर्देशिका के साथ लोड करने से डुप्लिकेट त्रुटियां मिलेंगी:

<configuration>
    <location path="." inheritInChildApplications="false">
    <system.webServer>
        <defaultDocument enabled="true">
            <files>
                <add value="index.html" />
            </files>
        </defaultDocument>
    </system.webServer>
  </location>
</configuration>
— डेविन मैक्वीन
स्रोत
1

मैंने कोणीय 2 बीज में जाँच की कि यह कैसे काम करता है।

जब पृष्ठ पुनः लोड किया जाता है तो आप स्वचालित रूप से पुनर्निर्देशित करने के लिए एक्सप्रेस-इतिहास-एपी-फ़ॉलबैक का उपयोग कर सकते हैं ।

मुझे लगता है कि इस समस्या को हल करने का सबसे सुरुचिपूर्ण तरीका IMO है।

— Lievno
स्रोत
1

यदि आप PathLocationStrategy का उपयोग करना चाहते हैं:

  • वन्यजीव विन्यास:
    • WEB-INF में रखी जाने वाली अंडर-हैंडलर.कॉन्फ़ फ़ाइल बनाएँ
    • सामग्री: (अपने बाकी समापन बिंदुओं को छोड़ दें!)
      • regex ['( ? / / / / ? $)' '] और regex [' ((। / endpoint। ) '] -> को फिर से लिखना [' / index.html '] नहीं
      • regex ['(? / तैनाती / / ? $)'] और नहीं regex ['(( / / समापन बिंदु। )'] -> फिर से लिखना ['/ index.html']

Java EE / Wildfly के साथ सिंगल पेज एप्लिकेशन: सर्वर-साइड कॉन्फ़िगरेशन

— nkeymeulen
स्रोत
1

2017-जुलाई -11: चूंकि यह एक समस्या से जुड़ा हुआ है, लेकिन इस समस्या को इलेक्ट्रॉन के साथ कोणीय 2 का उपयोग करते हुए, मैं यहां अपना समाधान जोड़ूंगा।

मुझे बस इतना करना था <base href="./">कि मेरे index.html से हटा दिया गया था और इलेक्ट्रॉन ने पेज को फिर से सफलतापूर्वक लोड करना शुरू कर दिया था।

— TimTheEnchanter
स्रोत
1

आयात जोड़ें:

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

और NgModule प्रदाता में, जोड़ें:

providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]

मुख्य index.html में App की फ़ाइल आधार href से बदल देती ./index.htmlहै/

किसी भी सर्वर में तैनात ऐप उस पेज के लिए एक वास्तविक यूआरएल देगा, जिसे किसी भी बाहरी एप्लिकेशन से एक्सेस किया जा सकता है।

— Debargho24
स्रोत
1

बस रूट में .htaccess को जोड़ने से कोणीय 4 अपाचे 2 में पृष्ठ को रीफ्रेश करते हुए 404 को हल किया गया।

<IfModule mod_rewrite.c>
    RewriteEngine on

    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # Rewrite everything else to index.html
    # to allow html5 state links
    RewriteRule ^ index.html [L]
</IfModule>
— a_k_v
स्रोत
1

मुझे लगता है कि आप 404 प्राप्त कर रहे हैं क्योंकि आपके http: // लोकलहोस्ट / रूट का अनुरोध कर रहे हैं जो कि टॉमकैट सर्वर पर मौजूद नहीं है। जैसा कि Angular 2 URL के अंत में hashes का उपयोग करने के बजाय डिफ़ॉल्ट रूप से html 5 राउटिंग का उपयोग करता है, पृष्ठ को ताज़ा करना एक अलग संसाधन के लिए अनुरोध की तरह दिखता है।

टॉमकैट पर कोणीय मार्ग का उपयोग करते समय आपको यह सुनिश्चित करने की आवश्यकता होती है कि पृष्ठ को ताज़ा करते समय आपका सर्वर आपके ऐप के सभी मार्गों को आपके मुख्य index.html पर मैप करेगा। इस समस्या को हल करने के कई तरीके हैं। जिस पर भी आप सूट करते हैं, आप उसके लिए जा सकते हैं।

1) अपने तैनाती फ़ोल्डर के web.xml में नीचे कोड डालें:

<error-page>
     <error-code>404</error-code>
     <location>/index.html</location>
</error-page>

2) आप मार्गों के लिए URL में # के साथ HashLocationStrategy का उपयोग करके भी देख सकते हैं:

प्रयोग करके देखें:

RouterModule.forRoot (मार्गों, {उपयोग: सच})

के बजाय:

RouterModule.forRoot (रूट)

HashLocationStrategy के साथ आपका url जैसा होना चाहिए:

http: // localhost / # / मार्ग

3) Tomcat URL रिवाइराइट वाल्व: संसाधन नहीं मिलने पर indexl पर पुनः निर्देशित करने के लिए सर्वर स्तर कॉन्फ़िगरेशन का उपयोग करके यूआरएल को फिर से लिखें।

3.1) META-INF फ़ोल्डर के अंदर एक फ़ाइल reference.xml बनाएँ और उसके अंदर नीचे संदर्भ की प्रतिलिपि बनाएँ।

<? xml version='1.0' encoding='utf-8'?>
<Context>
  <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
</Context>

3.2) WEB-INF के अंदर, फ़ाइल rewrite.config बनाएं (इस फ़ाइल में URL पुनर्लेखन के लिए नियम और URL पुनर्लेखन के लिए tomcat द्वारा उपयोग किया गया है)। Rewrite.config के अंदर, नीचे दी गई सामग्री की प्रतिलिपि बनाएँ:

  RewriteCond %{SERVLET_PATH} !-f
  RewriteRule ^/(.*)$ /index.html [L]
— करन खन्ना
स्रोत
0

यह सही जवाब नहीं है, लेकिन ऑन-रिफ्रेश आप 404 पेज पर 404 पेज का त्याग कर सभी मृत कॉलों को मुखपृष्ठ पर रीडायरेक्ट कर सकते हैं, यह एक अस्थायी हैक है, जो कि 404.html फ़ाइल के बाद आता है।

<!doctype html>
<html>
    <head>
        <script type="text/javascript">
            window.location.href = "http://" + document.location.host;
        </script>
    </head>
</html>
— don625
स्रोत
0

"राउटर-नॉट-वर्किंग-ऑन-रीलोडिंग-द-ब्राउज़र" को हल करने का सबसे अच्छा समाधान यह है कि हमें स्पा-फॉल बैक का उपयोग करना चाहिए। यदि आप asp.net core के साथ angular2 एप्लिकेशन का उपयोग कर रहे हैं, तो हमें इसे "StartUp.cs" पृष्ठ पर परिभाषित करने की आवश्यकता है। MVC रूट्स के तहत। मैं कोड संलग्न कर रहा हूं।

 app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
            routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index" });
        });
— Divyanshu-सिस्टमैटिक्स
स्रोत
0

इसका जवाब काफी पेचीदा है। यदि आप एक सादे पुराने अपाचे सर्वर (या IIS) का उपयोग करते हैं, तो आपको समस्या मिलती है क्योंकि कोणीय पृष्ठ वास्तविक के लिए मौजूद नहीं हैं। उन्हें कोणीय मार्ग से "गणना" किया जाता है।

समस्या को ठीक करने के कई तरीके हैं। एक कोणीय द्वारा की पेशकश की HashLocationStrategy का उपयोग करना है । लेकिन URL में एक तेज चिन्ह जोड़ा गया है। यह मुख्य रूप से कोणीय 1 (मुझे लगता है) के साथ संगतता के लिए है। तथ्य यह है कि तीक्ष्ण URL का हिस्सा नहीं है (तब सर्वर "#" चिह्न से पहले भाग को हल करता है)। यह सही हो सकता है।

यहां एक बढ़ी हुई विधि (404 चाल के आधार पर)। मुझे लगता है कि आपके पास अपने कोणीय अनुप्रयोग का "वितरित" संस्करण है ( ng build --prodयदि आप कोणीय-सीएलआई का उपयोग करते हैं) और आप सीधे अपने सर्वर से पृष्ठों का उपयोग करते हैं और पीएचपी सक्षम है।

यदि आपकी वेबसाइट पृष्ठों पर आधारित है (उदाहरण के लिए Wordpress) और आपके पास केवल एक फ़ोल्डर है, जो कोणीय (मेरे उदाहरण में "डिस्ट" नाम दिया गया है) के लिए समर्पित है, तो आप कुछ अजीब कर सकते हैं, लेकिन अंत में, सरल। मुझे लगता है कि आपने अपने कोणीय पृष्ठों को "/ डिस्ट" (तदनुसार <BASE HREF="/dist/">) संग्रहीत किया है । अब 404 पुनर्निर्देशन और PHP की मदद का उपयोग करें।

अपने अपाचे विन्यास में (या .htaccessअपने कोणीय अनुप्रयोग निर्देशिका की फ़ाइल में), आपको जोड़ना होगाErrorDocument 404 /404.php

404.php निम्नलिखित कोड के साथ शुरू होगा:

<?php
$angular='/dist/';
if( substr($_SERVER['REQUEST_URI'], 0, strlen($angular)) == $angular ){
    $index = $_SERVER['DOCUMENT_ROOT'] . $angular . "index.html";
    http_response_code(200);
    include $index;
    die;
}

// NOT ANGULAR...
echo "<h1>Not found.</h1>"

$angularआपके कोणीय के HREF में संग्रहीत मान कहाँ है index.html।

सिद्धांत काफी सरल है, यदि अपाचे पृष्ठ नहीं ढूंढता है, तो 404 रीडायरेक्शन PHP स्क्रिप्ट के लिए बनाया गया है। हम सिर्फ यह जाँचते हैं कि पृष्ठ कोणीय अनुप्रयोग निर्देशिका के अंदर है या नहीं। यदि ऐसा है, तो हम सीधे index.html को लोड करते हैं (बिना रीडायरेक्ट किए बिना): यह URL को अपरिवर्तित रखने के लिए आवश्यक है। हम HTTP कोड को 404 से 200 (केवल क्रॉलर के लिए बेहतर) में बदलते हैं।

यदि कोणीय अनुप्रयोग में पृष्ठ मौजूद नहीं है तो क्या होगा? खैर, हम कोणीय राउटर के "कैच ऑल" का उपयोग करते हैं (देखें कोणीय राउटर प्रलेखन)।

यह विधि एक बुनियादी वेबसाइट के अंदर एक एम्बेडेड कोणीय अनुप्रयोग के साथ काम करती है (मुझे लगता है कि यह भविष्य में मामला होगा)।

टिप्पणियाँ:

  • mod_redirect(URL को फिर से लिखकर) के साथ ऐसा ही करने की कोशिश करना एक अच्छा समाधान नहीं है क्योंकि फ़ाइलों (जैसे परिसंपत्तियों) को वास्तव में लोड किया जाना है, तो यह "नहीं मिला" समाधान का उपयोग करने की तुलना में बहुत अधिक जोखिम भरा है।
  • ErrorDocument 404 /dist/index.htmlकार्यों का उपयोग करके पुनर्निर्देशित करना लेकिन अपाचे अभी भी 404 त्रुटि कोड (जो क्रॉलर के लिए खराब है) के साथ प्रतिक्रिया दे रहा है।
— विलियम आर
स्रोत
0

यह समस्या के लिए एक स्थायी फिक्स नहीं है, बल्कि वर्कअराउंड या हैक की तरह है

मेरे पास यही मुद्दा था जब मैंने अपने Angular App को gh-pages पर तैनात किया। जब मेरे पेजों को gh- पेजों पर रीफ्रेश किया जाता है तो सबसे पहले मुझे 404 संदेशों के साथ बधाई दी गई थी।

फिर जैसा कि @ आंगन ने बताया कि मैंने उपयोग करना शुरू कर दिया HashLocationStrategyथा जो कोणीय 2 के साथ प्रदान किया गया था।

लेकिन यह उर में समस्याओं का खुद का सेट है के साथ आया #था यह वास्तव में बुरा था url इस तरह से अजीब लग रही थी https://rahulrsingh09.github.io/AngularConcepts/#/faq।

मैंने इस समस्या के बारे में शोध करना शुरू किया और एक ब्लॉग पर आया। मैंने इसे एक शॉट देने की कोशिश की और यह काम कर गया।

यहाँ उस ब्लॉग में उल्लेख किया गया है।

आपको अपने gh-पेज रेपो में 404.html फ़ाइल जोड़कर शुरू करना होगा जिसमें इसके भीतर एक खाली HTML दस्तावेज़ है - लेकिन आपके दस्तावेज़ को 512 बाइट्स (नीचे समझाया गया) कुल होना चाहिए। अगले मार्कअप को अपने 404.html पेज के मुख्य तत्व में रखें:

<script>
  sessionStorage.redirect = location.href;
</script>
<meta http-equiv="refresh" content="0;URL='/REPO_NAME_HERE'"></meta>

यह कोड मानक सत्रस्टोरेज ऑब्जेक्ट पर एक चर के लिए प्रयास किए गए प्रवेश URL को सेट करता है और तुरंत मेटा रीफ्रेश टैग का उपयोग करके आपकी परियोजना के index.html पृष्ठ पर रीडायरेक्ट करता है। यदि आप एक Github संगठन साइट कर रहे हैं, तो सामग्री विशेषता प्रतिकृति पाठ में रेपो नाम न डालें, बस यह करें: "= = 0; URL = '/'"

उपयोगकर्ता द्वारा शुरू में नेविगेट किए गए URL को कैप्चर करने और पुनर्स्थापित करने के लिए, आपको पृष्ठ की वर्तमान स्थिति पर कोई भी अन्य जावास्क्रिप्ट कार्य करने से पहले अपने स्क्रिप्ट पृष्ठ के प्रमुख पर निम्न स्क्रिप्ट टैग जोड़ना होगा:

<script>
  (function(){
    var redirect = sessionStorage.redirect;
    delete sessionStorage.redirect;
    if (redirect && redirect != location.href) {
      history.replaceState(null, null, redirect);
    }
  })();
</script>

यह बिटकॉइन URL को हमने 404.html पेज पर सेशनस्टोरेज में कैश किया है और वर्तमान इतिहास प्रविष्टि को बदल देता है।

इस वर्कअराउंड के लिए @ बैकैनियल को संदर्भ बैकलिकोडर धन्यवाद।

अब उपरोक्त URL https://rahulrsingh09.github.io/AngularConcepts/faq में बदल गया

— राहुल सिंह
स्रोत
0

मैंने एक हैंडलर जोड़कर इसे (जावा / स्प्रिंग बैकएंड का उपयोग करके) तय किया जो मेरे कोणीय मार्गों में परिभाषित हर चीज से मेल खाता है, जो 404 के बजाय वापस index.html भेजता है। यह तब प्रभावी रूप से (पुनः) एप्लिकेशन को बूटस्ट्रैप करता है और सही पेज को लोड करता है। मेरे पास किसी भी चीज के लिए 404 हैंडलर है जो इसके द्वारा नहीं पकड़ा जाता है।

@Controller         ////don't use RestController or it will just send back the string "index.html"
public class Redirect {

    private static final Logger logger = LoggerFactory.getLogger(Redirect.class);

    @RequestMapping(value = {"comma", "sep", "list", "of", "routes"})
    public String redirectToIndex(HttpServletRequest request) {
        logger.warn("Redirect api called for URL {}. Sending index.html back instead. This will happen on a page refresh or reload when the page is on an Angular route", request.getRequestURL());
        return "/index.html";
    }
}
— ली विलिस
स्रोत
0

यदि आप Apache या Nginx को एक सर्वर के रूप में उपयोग कर रहे हैं, तो आपको एक .htaccess बनाने की आवश्यकता है

<IfModule mime_module>
      AddHandler application/x-httpd-ea-php72 .php .php7 .phtml
    </IfModule>
    # php -- END cPanel-generated handler, do not edit

    <IfModule mod_rewrite.c>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html
        # to allow html5 state links
        RewriteRule ^ index.html [L]
    </IfModule>
— मुकेश कुमार बिजारणिया
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.