सवाल कोणीय 2: 404 त्रुटि तब होती है जब मैं ब्राउज़र के माध्यम से रीफ्रेश करता हूं [डुप्लिकेट]


इस प्रश्न का उत्तर यहां दिया गया है:

मैं कोणीय 2 के लिए नया हूं। मैंने अपने एकल पृष्ठ एप्लिकेशन को अपने सर्वर में "myapp" नामक फ़ोल्डर में संग्रहीत किया है। मैंने आधार पर यूआरएल बदल दिया है http://example.com/myapp/`।

मेरे प्रोजेक्ट में दो पेज हैं। तो मैं कोणीय 2 रूटिंग लागू करता हूं। मैंने डिफ़ॉल्ट पृष्ठ को लॉगिन के रूप में सेट किया है। जब मैं टाइप करता हूं http://example.com/myapp/ मेरे ब्राउज़र में यह स्वचालित रूप से रीडायरेक्ट हो जाएगा http://example.com/myapp/login। लेकिन अगर उस पृष्ठ को रीफ्रेश करें तो मुझे एक मिलता है 404 त्रुटि, यह कह रहा है http://example.com/myapp/login नहीं मिला।

लेकिन अगर मैं लाइट सर्वर का उपयोग कर अपना प्रोजेक्ट चलाता हूं तो सबकुछ काम कर रहा है। इस मामले में आधार index.html में यूआरएल होगा "/"। इसे कैसे ठीक करें?


110
2018-02-09 06:04


मूल




जवाब:


वास्तव में, यह सामान्य है कि आपके एप्लिकेशन को रीफ्रेश करते समय आपके पास 404 त्रुटि है क्योंकि ब्राउज़र के भीतर वास्तविक पता अपडेट हो रहा है (और # / हैशबैंग दृष्टिकोण के बिना)। डिफ़ॉल्ट रूप से, कोणीय 2 में पुन: उपयोग करने के लिए HTML5 इतिहास का उपयोग किया जाता है।

404 त्रुटि को ठीक करने के लिए, आपको सेवा करने के लिए अपने सर्वर को अपडेट करना होगा index.html आपके द्वारा परिभाषित प्रत्येक मार्ग पथ के लिए फ़ाइल।

यदि आप हैशबैंग दृष्टिकोण पर स्विच करना चाहते हैं, तो आपको इस कॉन्फ़िगरेशन का उपयोग करने की आवश्यकता है:

import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';

import {MyApp} from './myapp';

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

इस मामले में, जब आप पृष्ठ को रीफ्रेश करते हैं, तो इसे फिर से प्रदर्शित किया जाएगा (लेकिन आपके पास एक होगा # आपके पते में)।

यह लिंक आपको भी मदद कर सकता है: जब मैं अपनी वेबसाइट रीफ्रेश करता हूं तो मुझे 404 मिलते हैं। यह कोणीय 2 और फायरबेस के साथ है

उम्मीद है कि यह आपकी मदद करता है, थियरी


85
2018-02-09 06:09



यह मेरी समस्या हल हो गया, बहुत बहुत धन्यवाद। हालांकि, हैशबैंग दृष्टिकोण का उपयोग करने में कोई नुकसान है ?, मेरा मतलब एसईओ या कुछ और के मामले में है? - Werner Echezuria
क्या होगा यदि हम हैशलोकेशनस्ट्रेटी लेकिन PathLocationStrategy का उपयोग नहीं करना चाहते हैं? - Ben
@ बेन थियरी ने उल्लेख किया, "यदि आप 404 त्रुटि नहीं चाहते हैं, तो आपको परिभाषित प्रत्येक मार्ग पथ के लिए index.html फ़ाइल की सेवा के लिए अपने सर्वर को अपडेट करना होगा।" प्रत्येक सर्वर सॉफ्टवेयर के लिए विस्तृत तरीके हैं साथ काम करने के बारे में कोणीय विकी html5Mode, या फायरबेस कॉन्फ़िगरेशन के लिए थिएरी द्वारा प्रदान किए गए लिंक को देखें। - Franklin Yu
नीचे दिए गए उत्तर angular2 अंतिम संस्करण के लिए अद्यतन के लिए है - Sam
क्या आपको यह समाधान कोणीय 4 में मिला? - Bhavesh Hirpara


के लिए अद्यतन करें कोणीय 2 फाइनल संस्करण

App.module.ts में:

  • आयात जोड़ें:

    import { HashLocationStrategy, LocationStrategy } from '@angular/common';
    
  • और NgMoudle प्रदाता में, जोड़ें:

    {provide: LocationStrategy, useClass: HashLocationStrategy}
    

उदाहरण (App.module.ts):

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
    bootstrap: [AppComponent],
})
export class AppModule {}

विकल्प

{UseHash: true} तर्क के साथ RouterModule.forRoot का उपयोग करें।

उदाहरण:(से कोणीय दस्तावेज़)

import { NgModule } from '@angular/core';
...

const routes: Routes = [//routes in here];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes, { useHash: true })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

167
2017-08-23 13:51



लोकप्रियता के अनुसार उत्तर पुन: व्यवस्थित किए जा सकते हैं, इसलिए रिश्तेदार स्थिति को संरक्षित नहीं किया जाएगा। कृपया अपने उत्तर में दूसरे उत्तर का एक लिंक प्रदान करें। - Jonathan Mee
यह मेरे लिए काम करता है। धन्यवाद। लेकिन क्या # खोने का कोई तरीका है? - Sparked
हाँ यह मेरे लिए भी काम करता है। लेकिन मैं प्रमाणीकरण के लिए auth0 का उपयोग कर रहा हूं और मुझे यूआरएल को अनुमति देना है। जब मैं पेज को रीफ्रेश करता हूं जो अब हैश जोड़ता है, तो लॉगिन करें कि यह यूआरएल स्वीकार नहीं करेगा। पेज को रीफ्रेश होने पर इसे ठीक करने या हैशटैग को हटाने का सुझाव क्या है? - wuno
प्रदाताओं को इस उत्तर का पहला समाधान जोड़ना (प्रदाताओं: [{प्रदान करें: स्थानस्ट्रेटी, उपयोग क्लास: हैशलोकेशनस्ट्रेटी}], बूटस्ट्रैप: [AppComponent],) काम किया !! अनेक अनेक धन्यवाद! / \! - HydTechie
कोणीय 4.2.6 पर काम करना :) - Víctor Dueñas Robles


लोगों के लिए (मेरे जैसे) जो वास्तव में चाहते हैं PathLocationStrategy (यानी html5Mode) के बजाय HashLocationStrategy, देख कैसे करें: html5Mode के साथ काम करने के लिए अपने सर्वर को कॉन्फ़िगर करें एक तीसरे पक्ष विकी से:

जब आपके पास html5Mode सक्षम है, तो # चरित्र अब आपके यूआरएल में इस्तेमाल नहीं किया जाएगा। # प्रतीक उपयोगी है क्योंकि इसे कोई सर्वर साइड कॉन्फ़िगरेशन की आवश्यकता नहीं है। के बग़ैर #, यूआरएल बहुत अच्छा दिखता है, लेकिन इसके लिए सर्वर साइड रीराइट्स की भी आवश्यकता होती है।

यहां विकी से हारने के मामले में, मैं केवल विकी से तीन उदाहरण कॉपी करता हूं। अन्य उदाहरण खोजशब्द "यूआरएल रीराइट" खोजकर पाए जा सकते हैं (उदा। यह जवाब फायरबेस के लिए)।

अमरीका की एक मूल जनजाति

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        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]
    </Directory>
</VirtualHost>

पुनर्लेखन मॉड्यूल के लिए प्रलेखन

nginx

server {
    server_name my-app;

    root /path/to/app;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

के लिए दस्तावेज़ीकरण try_files

आईआईएस

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" 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>

51
2017-11-27 19:44



यह विषय कोणीय 2 (4) से संबंधित है - आपकी प्रतिक्रिया AngularJS से संबंधित है - Playnox
@ प्लेनॉक्स यहां उल्लेखित सब कुछ भी कोणीय 2 से 4 पर लागू होता है। (असल में मैंने एंगुलर का उपयोग 2 से शुरू नहीं किया था।) हो सकता है कि आप कोणीय-यूआई विकी के लिंक से निष्कर्ष पर पहुंचे हों, जहां कोड नमूना AngularJS है। - Franklin Yu
और झूठे आरोपों के कारण मैं नीचे गिर गया। खैर, कम से कम कुछ प्रतिक्रिया है ... - Franklin Yu
@ फ्रैंकलिन Yu क्या आपने वेबलॉगिक सर्वर के लिए कोई कॉन्फ़िगरेशन देखा है? कोई भाग्य नहीं है। - overboard182
@ overboard182 क्षमा करें, मेरे पास WebLogic का कोई अनुभव नहीं है। कुछ ऑनलाइन क्यू एंड ए (जैसे यह वाला) सुझाव देते हैं कि वेबलॉगिक यूआरएल रिवाइटिंग का समर्थन नहीं करता है, इसलिए आपको इसे वेबलॉगिक (रिवर्स प्रॉक्सी) के सामने या वेबलॉगिक के पीछे करना होगा (वेबलॉगिक प्रॉक्सी अनुरोध को किसी अन्य एप्लिकेशन या सर्वलेट पर दें)। - Franklin Yu


मुझे भी यही समस्या थी। मेरा कोणीय अनुप्रयोग विंडोज सर्वर पर चल रहा है।

मैंने एक समस्या बनाकर इस समस्या को हल किया web.config में फ़ाइल जड़ निर्देशिका।

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" 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>

15
2017-12-18 15:14



यह बहुत अच्छा है लेकिन ऐसा लगता है कि आपको यह पता चला होगा कि यहां: jasonwatmore.com/post/2016/07/26/... यदि ऐसा है तो आपको कम से कम उस व्यक्ति को क्रेडिट देना चाहिए। - Dane Vinson
Wonderfull! एक जादू की तरह काम करता है! धन्यवाद - Eduardo
आपने इस समस्या को अपने आप हल नहीं किया है। यह एक और लेख से उधार लिया गया था जो आपके 6 महीने पहले लिखा गया था। -1 - Mukus
@DaneVinson कोणीय विकी पहले भी है वैसे भी वह शायद किसी को क्रेडिट देना चाहिए। - Franklin Yu
इसके लिए धन्यवाद .. एक आकर्षण की तरह काम किया! :-) - Darren McGrath


शायद आप राउटर मॉड्यूल के साथ अपनी रूट पंजीकृत करते समय इसे कर सकते हैं। आप नीचे की तरह संपत्ति "उपयोग हैश: सच" के साथ एक दूसरी वस्तु पारित कर सकते हैं:

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { ROUTES }   from './app.routes';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    RouterModule.forRoot(ROUTES ,{ useHash: true }),],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

12
2017-09-27 07:27



यदि आप बस कुछ काम करना चाहते हैं तो यह सबसे आसान तरीका है। हालांकि, anuglar.io इसके खिलाफ अनुशंसा करता है "डिफ़ॉल्ट रूप से चिपके रहें जब तक कि आपके पास हैश मार्गों का सहारा लेने का कोई अनिवार्य कारण न हो।" angular.io/docs/ts/latest/guide/router.html - justanotherdev
यह मेरे लिए काम किया - brk


यदि आप विजुअल स्टूडियो 2015 में एएसपी.नेट कोर 1 के माध्यम से एंगुलर 2 चला रहे हैं, तो आपको यह समाधान जुर्गन गत्शे से सहायक हो सकता है। वह इसमें वर्णन करता है एक ब्लॉग पोस्ट। यह मेरे लिए सबसे अच्छा समाधान था। ऐप से पहले अपने स्टार्टअप सीएस सार्वजनिक शून्य कॉन्फ़िगर () में नीचे दिए गए सी # कोड को रखें। यूसेस्टैटफाइल ();

app.Use( async ( context, next ) => {
    await next();

    if( context.Response.StatusCode == 404 && !Path.HasExtension( context.Request.Path.Value ) ) {
        context.Request.Path = "/index.html";
        await next();
    }
});

5
2017-10-25 06:36



Thx बहुत मदद की। :) - Sknecht


इसे पढ़ने वाले लोगों के लिए जो कोणीय 2 आरसी 4 या बाद में उपयोग करते हैं, ऐसा लगता है कि स्थानस्ट्रेटी को राउटर से सामान्य में स्थानांतरित कर दिया गया है। आपको इसे वहां से आयात करना होगा।

'प्रदान' लाइन के चारों ओर घुंघराले ब्रैकेट भी ध्यान दें।

main.ts

// Imports for loading & configuring the in-memory web api
import { XHRBackend } from '@angular/http';

// The usual bootstrapping imports
import { bootstrap }      from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';

import { AppComponent }         from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { Location, LocationStrategy, HashLocationStrategy} from '@angular/common';

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    {provide: LocationStrategy, useClass: HashLocationStrategy}
]);

4
2017-07-14 10:05