पृष्ठ को पुनः लोड करने से AngularJS HTML5 मोड के साथ गलत GET अनुरोध मिलता है

193

मैं अपने ऐप के लिए HTML5 मोड सक्षम करना चाहता हूं। मैंने विन्यास के लिए निम्न कोड रखा है, जैसा कि यहाँ दिखाया गया है :

return app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {

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

    $routeProvider.when('/', {
        templateUrl: '/views/index.html',
        controller: 'indexCtrl'
    });
    $routeProvider.when('/about',{
        templateUrl: '/views/about.html',
        controller: 'AboutCtrl'
    });

जैसा कि आप देख सकते हैं, मैंने उपयोग किया $locationProvider.html5modeऔर मैंने अपने सभी लिंक ng-hrefको बाहर करने के लिए बदल दिया /#/।

समस्या

फिलहाल, मैं localhost:9000/इंडेक्स पेज को देख सकता हूं और अन्य पेजों की तरह नेविगेट कर सकता हूं localhost:9000/about।

हालाँकि, समस्या तब होती है जब मैं localhost:9000/aboutपृष्ठ ताज़ा करता हूँ । मुझे निम्न आउटपुट मिले:Cannot GET /about

अगर मैं नेटवर्क कॉल देखता हूं:

Request URL:localhost:9000/about
Request Method:GET

जब मैं पहली बार जाता हूं localhost:9000/और फिर एक बटन पर क्लिक करता /aboutहूं जो मुझे मिलता है:

Request URL:http://localhost:9000/views/about.html

जो पेज को पूरी तरह से प्रस्तुत करता है।

रिफ्रेश होने पर मैं कोणीय को सही पृष्ठ प्राप्त करने में कैसे सक्षम कर सकता हूं?

angularjs  html  angular-routing 
— डाइटर डी मेसमाईकर
स्रोत
यहां देखें stackoverflow.com/questions/22394014/…
— साशा बी।
1
मैं इसे अपने लिए हल करता हूं। यहां देखें stackoverflow.com/questions/22394014/…
— साशा बी।

जवाबों:

99

से कोणीय डॉक्स

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

इसका कारण यह है कि जब आप पहली बार पृष्ठ पर जाते हैं ( /about), जैसे कि एक ताज़ा करने के बाद, ब्राउज़र को यह जानने का कोई तरीका नहीं है कि यह एक वास्तविक URL नहीं है, इसलिए यह आगे बढ़ता है और इसे लोड करता है। हालाँकि, यदि आपने रूट पेज को पहले लोड किया है, और सभी जावास्क्रिप्ट कोड, तो जब आप /aboutसर्वर को हिट करने और तदनुसार इसे संभालने की कोशिश करते हैं तो इससे पहले कि आप कोणीय में प्रवेश कर सकते हैं।

— जेम्स शार्प
स्रोत
21
जब यह कहता है कि "आपको अपने सभी लिंक को अपने आवेदन के प्रवेश बिंदु पर फिर से लिखना होगा (जैसे index.html)" इसका क्या मतलब है? इसका मतलब यह मैं अपने में जाने के लिए है $routeProviderऔर प्रत्येक के रास्तों को बदलने templateUrlसे जैसे templateUrl : '/views/about.html',करने के लिए templateUrl : 'example.com/views/about.html',?
7
नहीं, $ मार्गप्रोविडर में आपके नियम वैसे ही रहने चाहिए। उत्तर "सर्वर साइड" को संदर्भित करता है। यह सर्वर पर रूटिंग को बदलने का संदर्भ देता है जो आपके कोणीय HTML पृष्ठ प्रदान करता है। प्रत्येक अनुरोध को आपके कोणीय एप्लिकेशन को प्राप्त होने से पहले, इसे सर्वर-साइड रूटिंग के माध्यम से पहले पास करना होगा, जो आपके कोणीय एप्लिकेशन प्रविष्टि बिंदु (जैसे 'index.html', या '/', जो आपके कोणीय के आधार पर इंगित करने के लिए सभी अनुरोधों को फिर से लिखना चाहिए। मार्गों का काम)।
— मार्नि
मामले में अगर मैं कुछ CDN के माध्यम से अपने minified index.html की सेवा करता हूँ तो यह राउटिंग तंत्र कैसे निष्पादित करेगा ??
— क्रेजीगीक
1
— जेम्स शार्प
5
अपाचे के लिए अच्छा लेख, एक htaccess छूट है
— Alcalyn
63

सेट करने के लिए कुछ चीजें हैं ताकि ब्राउज़र में आपका लिंक कैसा दिखेगा http://yourdomain.com/pathऔर ये आपके कोणीय कॉन्फ़िगरेशन + सर्वर साइड हैं

1) AngularJS

$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
  });
$locationProvider
  .html5Mode(true);

2) सर्वर साइड, बस .htaccessअपने रूट फ़ोल्डर के अंदर रखें और इसे पेस्ट करें

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]

Angularjs में html5 मोड के बारे में पढ़ने के लिए और अधिक रोचक सामग्री और अलग-अलग वातावरण में आवश्यक कॉन्फ़िगरेशन https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server -to-work-html5mode के साथ-साथ यह प्रश्न आपको $ स्थान / html5 और हैशबंग मोड / लिंक राइटिंग के बीच स्विच करने में मदद कर सकता है

— lokers
स्रोत
नमस्ते। मैंने उपरोक्त समाधान की कोशिश की, मेरी कॉन्फ़िगरेशन फ़ाइल में परिवर्तन किए। लेकिन फिर भी यह काम नहीं करता है। URL को रीफ्रेश करने से अभी भी "404 NOT FOUND" त्रुटि मिलती है।
— kTn
Websphere में तैनात ऐप में मैं पुनर्निर्देशित / फिर से कैसे लिखूं?
— गैरी
मैं नहीं देखता क्यों नहीं!
— 1919 को
36

मुझे इसी तरह की समस्या थी और मैंने इसे हल किया:

  • <base href="https://stackoverflow.com/index.html">इंडेक्स पेज में उपयोग करना

  • निम्नानुसार मेरे नोड / एक्सप्रेस सर्वर में सभी रूट मिडलवेयर को पकड़ने का उपयोग करें (राउटर के बाद इसे डालें):

app.use(function(req, res) {
    res.sendfile(__dirname + '/Public/index.html');
});

मुझे लगता है कि आपको उठना चाहिए और दौड़ना चाहिए।

यदि आप एक अपाचे सर्वर का उपयोग करते हैं, तो आप अपने लिंक mod_rewrite करना चाह सकते हैं। यह करना मुश्किल नहीं है। कॉन्फिग फाइलों में बस कुछ बदलाव।

सब कुछ है कि आप html5mode कोणीय पर सक्षम है मान रहा है। अभी। ध्यान दें कि कोणीय 1.2 में, बेस url की घोषणा करना वास्तव में अब अनुशंसित नहीं है।

— टे
स्रोत
1
इस समाधान ने मेरे लिए सेटिंग के साथ काम किया: <base href="https://stackoverflow.com/">और आपके द्वारा सुझाए गए एक्सप्रेस मार्ग को जोड़ना। बहुत धन्यवाद।
— गिलाद पेलेग
ताहिर चाड, क्या आपको अभी भी लागू करने के बाद एक सर्वराइड url-rewrite का उपयोग करने की आवश्यकता थी <base href="https://stackoverflow.com/index.html">?
— कोडी
हाँ, आप url पुनर्लेखन को अपने एप्लिकेशन / वेबसाइट के आधार url को पत्थर (डोमेन शामिल) में सेट करने के तरीके के रूप में देख सकते हैं। 'आधार url' html कथन यह सुनिश्चित करने का एक तरीका है कि सभी रिश्तेदार लिंक एक ही आधार से सही तरीके से प्राप्त किए गए हैं। यदि आपके लिंक निरपेक्ष हैं, तो बेस यूआरएल बिल्कुल आवश्यक नहीं है।
— तये
1
जब मैं इसका उपयोग करता हूं, तो मैं केवल पृष्ठ पर ही html कोड देखता हूं, न कि एक वास्तविक पृष्ठ के रूप में।
— नूह
2
यह उत्तर ट्रिपल सितारों के योग्य है! इस तरह का सीधा जवाब देने के लिए धन्यवाद। हर कोई बस "सर्वर रीडायरेक्ट करने की आवश्यकता" के बारे में एक ही पंक्ति दोहराता है।
— अहमद हक
27

BrowserSync और Gulp के लिए समाधान।

से https://github.com/BrowserSync/browser-sync/issues/204#issuecomment-102623643

पहले स्थापित करें connect-history-api-fallback:

npm --save-dev install connect-history-api-fallback

फिर इसे अपने gulpfile.js में जोड़ें:

var historyApiFallback = require('connect-history-api-fallback');

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: "app",
      middleware: [ historyApiFallback() ]
    }
  });
});
— ऑस्कर
स्रोत
ओह तस्वीर! अंत में कोणीय दृश्य विकास से राहत! और बोनस के रूप में, मानक URL (बिना हैश-बैंग) मार्ग के भी! धन्यवाद!
— बिट-कम
1
एक आकर्षण की तरह काम करता है ... बहुत बहुत धन्यवाद!
— निशांत नायर
1
यदि आप एक विशिष्ट पोर्ट का उपयोग कर रहे हैं (यानी Ionic रिक्त टेम्प्लेट पोर्ट 8100 पर चलता है) server: { ... }, port: 8100, तो बस सर्वर के बाद एक अतिरिक्त संपत्ति जोड़ें अर्थात , फिर serveअपने डिफ़ॉल्ट gulp कार्य (यानी gulp.task('default', ['sass', 'serve']);) में कार्य जोड़ें , और फिर आप ऐप चला सकते हैं Cannot GET ...जब आप पेज को रन करके रिफ्रेश करते हैं तो ब्राउजर एरर के बिना gulp। ध्यान दें कि सर्वर को चलाने के बाद ionic serveभी त्रुटियों का सामना करना पड़ता है।
— ल्यूक स्कोन
यह अच्छी तरह से काम करता है जब मैं विकास ब्राउज़र्स का उपयोग करता हूं, उन उत्पादों में जो मैं एक्सप्रेस ऐप के रूप में एप्लिकेशन चला रहा हूं और सभी मार्ग को कोणीय ऐप को ऐप के रूप में पुनर्निर्देशित कर रहा हूं। ; res.redirect ('/');}); सीधे रास्ता देने पर पेज लोड नहीं होता है?
— श्री एजे
13

ऐप लोड करने के लिए आपको अपने सर्वर को सब कुछ फिर से लिखने के लिए index.html में कॉन्फ़िगर करना होगा:

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#wiki-how-to-configure-your-server-to-work-with-html5mode

— अनुदान
स्रोत
1
सही, मेरे लिए समस्या सर्वर को व्यवस्थित करने के लिए लारवेल फोर्ज का उपयोग कर रही थी, जिसमें try_files $uri $uri/ /index.php?...आवश्यक के बजाय प्रासंगिक नग्नेक्स लाइन थी index.html। लिंक के लिए धन्यवाद!
— CJ थॉम्पसन
शीर्ष उत्तर होना चाहिए, हर स्थिति को अपने सर्वर से कोई फर्क नहीं पड़ता। पूरी तरह से NodeJS के साथ काम किया
— जो लॉयड
10

मैंने ग्रंट परियोजनाओं पर यूआरएल-पुनर्लेखन का अनुकरण करने के लिए एक सरल कनेक्ट मिडलवेयर लिखा। https://gist.github.com/muratcorlu/5803655

आप इस तरह का उपयोग कर सकते हैं:

module.exports = function(grunt) {
  var urlRewrite = require('grunt-connect-rewrite');

  // Project configuration.
  grunt.initConfig({
    connect: {
      server: {
        options: {
          port: 9001,
          base: 'build',
          middleware: function(connect, options) {
            // Return array of whatever middlewares you want
            return [
              // redirect all urls to index.html in build folder
              urlRewrite('build', 'index.html'),

              // Serve static files.
              connect.static(options.base),

              // Make empty directories browsable.
              connect.directory(options.base)
            ];
          }
        }
      }
    }
  })
};
— मूरत Çorlu
स्रोत
क्या URL री-राइटिंग को पूरा करने का एक मैनुअल तरीका है $routeProvider?
1
urlRewriteजब इसे चलाने की कोशिश की जा रही है, तो मुझे चेतावनी नहीं मिली है, और मुझे फिर से लिखने के साथ सही जुड़ाव खोजने में मुश्किल समय आ रहा है।
मुझे एक त्रुटि दिखाता है "ऑब्जेक्ट बिल्ड में कोई विधि नहीं है 'initConfig' का उपयोग करें - जारी रखने के लिए।"
— इडोनबज्रामी
8

यदि आप AngVCJS के साथ MVC के साथ .NET स्टैक में हैं, तो आपको url से '#' हटाने के लिए यह करना होगा:

  1. अपने आधार पृष्ठ को अपने _Layout पृष्ठ में सेट करें: <head> <base href="https://stackoverflow.com/"> </head>

  2. फिर, अपने कोणीय एप्लिकेशन कॉन्फिगर में निम्नलिखित जोड़ें: $locationProvider.html5Mode(true)

  3. इसके बाद के संस्करण url से '#' निकाल देंगे लेकिन पेज रिफ्रेश काम नहीं करेगा जैसे यदि आप "yoursite.com/about" पेज में हैं तो रिफ्रेश आपको 404 देगा। ऐसा इसलिए है क्योंकि MVC को कोणीय रूटिंग के बारे में नहीं पता है और MVC पैटर्न द्वारा 'एमवीसी' के लिए एमवीसी पृष्ठ की तलाश करेगा जो एमवीसी मार्ग में मौजूद नहीं है। इसके लिए समाधान सभी MVC पृष्ठ अनुरोध को एक ही MVC दृश्य में भेजने के लिए है और आप ऐसा कर सकते हैं कि एक मार्ग जोड़कर जो सभी Ml को पकड़ता है

routes.MapRoute(
        name: "App",
        url: "{*url}",
        defaults: new { controller = "Home", action = "Index" }
    );
— Maksood
स्रोत
8

Html5mode में पेज रिफ्रेश होने के बाद 404 एरर को रोकने के लिए IIS URL रिवाइटर रूल

विंडोज पर IIS के तहत कोणीय चल रहा है

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

Html5mode में पृष्ठ ताज़ा करने के बाद 404 त्रुटि को रोकने के लिए NodeJS / ExpressJS रूट

नोड / एक्सप्रेस के तहत कोणीय चल रहा है

var express = require('express');
var path = require('path');
var router = express.Router();

// serve angular front end files from root path
router.use('/', express.static('app', { redirect: false }));

// rewrite virtual urls to angular app to enable refreshing of internal pages
router.get('*', function (req, res, next) {
    res.sendFile(path.resolve('app/index.html'));
});

module.exports = router;

अधिक जानकारी: AngularJS - HTML5 मोड पेज को सक्षम करें NodeJS और IIS में 404 त्रुटियों के बिना ताज़ा करें

— जेसन
स्रोत
धन्यवाद, IIS नियमों ने मुझे azure में तैनात एक angular2 ऐप के साथ मदद की, जो एक बच्चे के मार्ग के लिए निर्देशित करने में विफल रहा था।
— बिट्सप्रिंट
मैं IIS के लिए समाधान के लिए पर्याप्त धन्यवाद नहीं कर सकता (वीएस 2013 में लोकलहोस्ट)। मेरे सिर को लंबे समय तक कुंठित किया, आखिरकार यह जवाब मिल गया। एक जादू की तरह काम किया।
— फ्लोरिडा जी।
5

जैसा कि दूसरों ने उल्लेख किया है, आपको सर्वर पर मार्गों को फिर से लिखना और सेट करना होगा <base href="https://stackoverflow.com/"/>।

के लिए gulp-connect:

npm install connect-pushstate

var gulp = require('gulp'),
  connect = require('gulp-connect'),
  pushState = require('connect-pushstate/lib/pushstate').pushState;
...
connect.server({
  ...
  middleware: function (connect, options) {
    return [
      pushState()
    ];
  }
  ...
})
....
— ब्रेट
स्रोत
4

मैं अपने देव पर्यावरण पर अपाचे (xampp) का उपयोग कर रहा हूं और उत्पादन पर अपाचे, जोड़ रहा हूं:

errorDocument 404 /index.html

.htaccess मेरे लिए इस मुद्दे को हल करें।

— crlshn
स्रोत
4

ग्रंट और ब्राउसरसिंक के लिए यहां कनेक्ट-मॉड्रूइट का उपयोग करें

var modRewrite = require('connect-modrewrite');    


browserSync: {
            dev: {
                bsFiles: {

                    src: [
                        'app/assets/css/*.css',
                        'app/*.js',
                        'app/controllers/*.js',
                        '**/*.php',
                        '*.html',
                        'app/jade/includes/*.jade',
                        'app/views/*.html',
               ],
            },
        options: {
            watchTask: true,
            debugInfo: true,
            logConnections: true,
            server: {
                baseDir :'./',
                middleware: [
                       modRewrite(['!\.html|\.js|\.jpg|\.mp4|\.mp3|\.gif|\.svg\|.css|\.png$ /index.html [L]'])
                ]
            },

            ghostMode: {
                scroll: true,
                links: true,
                forms: true
                    }
                }
            }
        },
— MrThunder
स्रोत
इस उत्तर के ऊपर 15 हैं जो समय की एक कमर थे। 1. npm install connect-modrewrite --save2. require in gruntfile3. ऊपर सर्वर obj कॉपी
— उमर
धन्यवाद यह मेरे लिए gulp 4 में BrowserSync सेटअप के साथ काम किया है।
— अब्दाली चंदनवाला
खुशी है कि यह @Addeali चंदनवाला में मदद की!
— मृदुराल
@ उमर मैं आपसे असहमत हूं, कम उन्नत उपयोगकर्ता जैसे कि खुद को यह देखने के लिए लाभ देते हैं कि इसे गुलफ़िले में कैसे जोड़ा जाए। यह याद रखना सबसे अच्छा है कि लोगों के पास ज्ञान के विभिन्न स्तर हैं और सिर्फ ग्रंटफाइल में लेखन की आवश्यकता नहीं होगी क्योंकि मैं यह मानने वाला हूं कि वे समझते हैं कि इसे कैसे जोड़ा जाए।
— मृदुराल
3

मैंने हल किया 

test: {
        options: {
          port: 9000,
          base: [
            '.tmp',
            'test',
            '<%= yeoman.app %>'
          ],
         middleware: function (connect) {
                  return [
                      modRewrite(['^[^\\.]*$ /index.html [L]']),
                      connect.static('.tmp'),
                      connect().use(
                          '/bower_components',
                          connect.static('./bower_components')
                      ),
                      connect.static('app')
                  ];
              }
        }
      },
— सिल्वियो ट्रोइया
स्रोत
3

मैं इस प्रश्न का उत्तर बड़े प्रश्न से दे रहा हूँ:

जब मैं $ स्थान जोड़ता हूं Provider.html5Mode (सत्य), मेरी साइट urls को चिपकाने की अनुमति नहीं देगी। HTML5Mode के सत्य होने पर मैं अपने सर्वर को कैसे काम करूं?

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

AngularJS के साथ एक्सप्रेस रिवाइ्रट्स के लिए, आप इसे निम्न अपडेट के साथ हल कर सकते हैं:

app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname + '/public/app/views/index.html'));
});

तथा 

<!-- FOR ANGULAR ROUTING -->
<base href="/">

तथा

app.use('/',express.static(__dirname + '/public'));
— Ironheartbj18
स्रोत
इसका समाधान धन्यवाद। Nodejs के लिए app.js में app.use ('/ *', इंडेक्स) जोड़ें;
— बाघिन
2

मुझे विश्वास है कि आपका मुद्दा सर्वर के संबंध में है। HTML5 मोड के संबंध में कोणीय प्रलेखन (आपके प्रश्न में लिंक पर) बताता है:

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

मेरा मानना ​​है कि आपको / से / के बारे में एक यूआरएल फिर से लिखना होगा।

— Lucuma
स्रोत
आपके उत्तर के लिए धन्यवाद। इसलिए जब मैं पेज के बारे में हूं और मैं रिफ्रेश करता हूं, तो सर्वर को यूआरएल को फिर से लिखना चाहिए /? समस्या यह है कि मैं एक रेल बैकएंड के साथ काम करता हूं जो एक अलग डोमेन पर है। सभी संचार एपीआई कॉल के द्वारा होता है। मैं उन URL को कैसे लिखूंगा?
— डाइटर डी मेसमाईकर
बात यह है कि आपका ऐप आपके सर्वर मार्ग पर उपलब्ध है / इसलिए जब आप किसी यूआरएल को ताज़ा करते हैं / जो ब्राउज़र के बारे में है तो आपके सर्वर से अनुरोध करेगा कि जो भी पृष्ठ / के बारे में है (इस मामले में आपके पास कोई पृष्ठ नहीं है, इसलिए आपको रीडायरेक्ट करने की आवश्यकता है उन वापस)।
— लुकुमा
2

हमारे पास एक्सप्रेस में एक सर्वर पुनर्निर्देशित था:

app.get('*', function(req, res){
    res.render('index');
});

और हम अभी भी पृष्ठ-ताज़ा मुद्दे प्राप्त कर रहे थे, तब भी जब हमने इसे जोड़ा <base href="https://stackoverflow.com/" />।

समाधान: सुनिश्चित करें कि आप नेविगेट करने के लिए पृष्ठ में वास्तविक लिंक का उपयोग कर रहे हैं; URL में मार्ग में टाइप न करें या आपको पृष्ठ-ताज़ा मिलेगा। (मूर्खतापूर्ण गलती, मुझे पता है)

:-P

— कोड़ी
स्रोत
लेकिन इसके कारण हर http अनुरोध में अनुक्रमणिका फ़ाइल होगी, जैसे:: / getJsonFromServer - एक http अनुरोध जो डेटा लौटाता है लेकिन इस कॉन्फ़िगरेशन के कारण यह अनुक्रमणिका पृष्ठ भी लौटा देगा
— vijay
1

अंत में मुझे सर्वर की तरफ से इस मुद्दे को हल करने का एक तरीका मिल गया क्योंकि यह अधिक है जैसे कि AngularJs के साथ एक समस्या है मैं केवल 1.5 Angularjs का उपयोग कर रहा हूं और मुझे पृष्ठ को फिर से लोड करने पर एक ही मुद्दा मिला। लेकिन मेरी server.jsफ़ाइल में नीचे कोड जोड़ने के बाद यह मेरा दिन बचा रहा है लेकिन यह एक उचित समाधान नहीं है या एक अच्छा तरीका नहीं है।

app.use(function(req, res, next){
  var d = res.status(404);
     if(d){
        res.sendfile('index.html');
     }
});
— अनिल यादव
स्रोत
0

मुझे और भी बेहतर ग्रन्ट प्लगइन मिल गया है, जो आपके इंडेक्स। Html और ग्रंटफाइल.जेएस के समान निर्देशिका में काम करता है;

https://npmjs.org/package/grunt-connect-pushstate

उसके बाद अपने Gruntfile में:

 var pushState = require('grunt-connect-pushstate/lib/utils').pushState;


    connect: {
    server: {
      options: {
        port: 1337,
        base: '',
        logger: 'dev',
        hostname: '*',
        open: true,
        middleware: function (connect, options) {
          return [
            // Rewrite requests to root so they may be handled by router
            pushState(),
            // Serve static files
            connect.static(options.base)
          ];
        }
      },
    }
},
— मिशाल लच
स्रोत
ग्रंट-कनेक्ट-पुशस्टेट मॉड्यूल को हटा दिया गया है
— इवान प्लाइस
0 
I solved same problem using modRewrite.  
AngularJS is reload page when after # changes.  
But HTML5 mode remove # and invalid the reload.  
So we should reload manually.
# install connect-modrewrite
    $ sudo npm install connect-modrewrite --save

# gulp/build.js
    'use strict';
    var gulp = require('gulp');
    var paths = gulp.paths;
    var util = require('util');
    var browserSync = require('browser-sync');
    var modRewrite  = require('connect-modrewrite');
    function browserSyncInit(baseDir, files, browser) {
        browser = browser === undefined ? 'default' : browser;
        var routes = null;
        if(baseDir === paths.src || (util.isArray(baseDir) && baseDir.indexOf(paths.src) !== -1)) {
            routes = {
                '/bower_components': 'bower_components'
            };
        }

        browserSync.instance = browserSync.init(files, {
            startPath: '/',
            server: {
            baseDir: baseDir,
            middleware: [
                modRewrite([
                    '!\\.\\w+$ /index.html [L]'
                ])
            ],
            routes: routes
            },
            browser: browser
        });
    }
— keiwt
स्रोत
0

मुझे JHipster के साथ उत्पन्न java + कोणीय ऐप के साथ भी यही समस्या थी । मैंने इसे फ़िल्टर और गुणों में सभी कोणीय पृष्ठों की सूची के साथ हल किया:

application.yml:

angular-pages:
  - login
  - settings
...

AngularPageReloadFilter.java

public class AngularPageReloadFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        request.getRequestDispatcher("index.html").forward(request, response);
    }
}

WebConfigurer.java

private void initAngularNonRootRedirectFilter(ServletContext servletContext,
                                              EnumSet<DispatcherType> disps) {
    log.debug("Registering angular page reload Filter");
    FilterRegistration.Dynamic angularRedirectFilter =
            servletContext.addFilter("angularPageReloadFilter",
                    new AngularPageReloadFilter());
    int index = 0;
    while (env.getProperty("angular-pages[" + index + "]") != null) {
        angularRedirectFilter.addMappingForUrlPatterns(disps, true, "/" + env.getProperty("angular-pages[" + index + "]"));
        index++;
    }
    angularRedirectFilter.setAsyncSupported(true);
}

आशा है, यह किसी के लिए उपयोगी होगा।

— इगोर ज़ॉबिक
स्रोत
0

गुलप + ब्राउज़रसंकट:

Npm के माध्यम से कनेक्ट-हिस्ट्री-एपी-फॉलबैक स्थापित करें, बाद में अपने सर्व गल्प कार्य को कॉन्फ़िगर करें

var historyApiFallback = require('connect-history-api-fallback');

gulp.task('serve', function() {
  browserSync.init({
    proxy: {
            target: 'localhost:' + port,
            middleware: [ historyApiFallback() ]
        }
  });
});
— ऑस्कर कैदियो
स्रोत
0

आपका सर्वर साइड कोड JAVA है तो नीचे दिए गए चरणों का पालन करें

चरण 1: डाउनलोड urlrewritefilter JAR यहां क्लिक करें और पथ WEB-INF / lib बनाने के लिए सहेजें

चरण 2: HTML5 मोड को सक्षम करें $ pProvider.html5Mode (सच);

चरण 3: आधार URL सेट करें <base href="https://stackoverflow.com/example.com/"/>

चरण 4: अपने WEB.XML में कॉपी और पेस्ट करें 

 <filter>
     <filter-name>UrlRewriteFilter</filter-name>
 <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
</filter>

<filter-mapping>
    <filter-name>UrlRewriteFilter</filter-name>
    <url-pattern>/*</url-pattern>
    <dispatcher>REQUEST</dispatcher>
    <dispatcher>FORWARD</dispatcher>
</filter-mapping>

चरण 5: WEN-INF / urlrewrite.xml में फ़ाइल बनाएँ

 <urlrewrite default-match-type="wildcard">


    <rule>
            <from>/</from>
            <to>/index.html</to>
        </rule>

    <!--Write every state dependent on your project url-->
    <rule>
            <from>/example</from>
            <to>/index.html</to>
        </rule>
    </urlrewrite>
— सेंथिल राज
स्रोत
डायनामिक url के लिए नियम कैसे जोड़ें - test.com/user/101 test.com/user/102
— कृष्ण कुमार चौरसिया
0

मेरे पास यह सरल समाधान है जिसका मैं उपयोग कर रहा हूं और इसके काम करता हूं।

App / Exception / Handler.php में

इसे शीर्ष पर जोड़ें:

use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

फिर रेंडर विधि के अंदर

public function render($request, Exception $exception)
{
    .......

       if ($exception instanceof NotFoundHttpException){

        $segment = $request->segments();

        //eg. http://site.dev/member/profile
        //module => member
        // view => member.index
        //where member.index is the root of your angular app could be anything :)
        if(head($segment) != 'api' && $module = $segment[0]){
            return response(view("$module.index"), 404);
        }

        return response()->fail('not_found', $exception->getCode());

    }
    .......

     return parent::render($request, $exception);
}
— एमेका Mbah
स्रोत
0

मैंने नोड स्नैक्स में कोड स्निपेट को जोड़कर समस्या का समाधान किया है।

app.get("/*", function (request, response) {
    console.log('Unknown API called');
    response.redirect('/#' + request.url);
});

नोट: जब हम पृष्ठ को रीफ्रेश करते हैं, तो यह कोणीय पृष्ठ के बजाय एपीआई के लिए दिखेगा (क्योंकि URL में # टैग नहीं है)। उपरोक्त कोड का उपयोग करते हुए, मैं # के साथ url पर पुनर्निर्देशित कर रहा हूं

— राम गोलपल्ली
स्रोत
-2

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

सूचकांक में इसे जोड़ें

<base href="/">

यह मेरे लिए काम करता है शायद आप Html5Mode app.config सेट करना भूल गए हैं

app.config(function ($stateProvider, $urlRouterProvider, $locationProvider){
    $locationProvider.html5Mode({ enabled: true, requireBase: true });
    $locationProvider.hashPrefix('!');
}
— user3084147
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.