পৃষ্ঠাটি পুনরায় লোড করা AngularJS HTML5 মোডের সাথে ভুল জিইটি অনুরোধ দেয়

193

আমি আমার অ্যাপ্লিকেশনটির জন্য এইচটিএমএল 5 মোড সক্ষম করতে চাই। আমি যত দেখানো কনফিগারেশনের জন্য নিচের কোডটি করা আছে এখানে :

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 
— ডিয়েটার ডি মেসেমেকার
সূত্র
এখানে দেখুন স্ট্যাকওভারফ্লো.com
— সাশা বি।
1
আমি আমার জন্য এটি সমাধান। এখানে দেখুন স্ট্যাকওভারফ্লো.com
— সাশা বি।

উত্তর:

99

থেকে কৌণিক ডক্স

সার্ভার সাইড
এই মোডটি ব্যবহার করার জন্য সার্ভার সাইডে ইউআরএল পুনর্লিখনের প্রয়োজন হয়, মূলত আপনাকে আপনার অ্যাপ্লিকেশনের প্রবেশের পয়েন্টে আপনার সমস্ত লিঙ্ক পুনরায় লিখতে হবে (যেমন সূচক। Html)

এর কারণ হ'ল আপনি যখন প্রথম পৃষ্ঠাটি দেখুন ( /about), যেমন একটি রিফ্রেশ করার পরে, ব্রাউজারের জানার কোনও উপায় নেই যে এটি আসল URL নয়, তাই এটি এগিয়ে যায় এবং এটি লোড হয় load তবে আপনি যদি প্রথমে মূল পৃষ্ঠাটি এবং সমস্ত জাভাস্ক্রিপ্ট কোডটি লোড করে রেখেছেন, তারপরে আপনি যখন /aboutকৌনিকটিতে নেভিগেট করেন তখন ব্রাউজারটি সার্ভারটি হিট করার চেষ্টা করে এবং সে অনুযায়ী এটি পরিচালনা করার আগে সেখানে প্রবেশ করতে পারে

— জেমস শার্প
সূত্র
21
যখন এটি বলে যে "আপনার অ্যাপ্লিকেশনটির প্রবেশের পয়েন্টে আপনার সমস্ত লিঙ্কগুলি পুনরায় লিখতে হবে (উদাহরণস্বরূপ index.html)" এর অর্থ কী? এর অর্থ কি আমাকে প্রবেশ করতে হবে এবং $routeProviderপ্রতিটি templateUrlউদাহরণের পথ পরিবর্তন templateUrl : '/views/about.html',করতে হবে templateUrl : 'example.com/views/about.html',?
7
না, $ রুটপ্রোভিডারে আপনার নিয়মগুলি যেমন আছে তেমন থাকা উচিত। উত্তরটি "সার্ভার সাইড" বোঝায়। এটি আপনার কৌণিক এইচটিএমএল পৃষ্ঠাগুলি সরবরাহ করে এমন সার্ভারে রাউটিং পরিবর্তন করে। প্রতিটি অনুরোধটি আপনার কৌণিক অ্যাপ্লিকেশনটিতে পৌঁছানোর আগে এটি সার্ভার-সাইড রুটিংয়ের মাধ্যমে প্রথমে পাস করতে হবে, যা আপনার কৌনিক অ্যাপ্লিকেশন এন্ট্রি পয়েন্টে চিহ্নিত করার জন্য সমস্ত অনুরোধগুলি পুনরায় লিখতে হবে (যেমন 'সূচক। Html', বা '/', কীভাবে আপনার কৌনিকটি নির্ভর করে রুট কাজ)।
— মার্নি
যদি আমি এই সিডিএন থেকে এই সিটিএন কার্যকর করতে পারি তার চেয়ে কিছু সিডিএন-এর মাধ্যমে যদি আমার সংযুক্তি সূচক। Html পরিবেশন করি তবে ??
— ক্রেজিজিক
1
— জেমস শার্প
5
অ্যাপাচি জন্য ভাল নিবন্ধ, একটি htaccess উদাহরণ আছে: ngmilk.rocks/2015/03/09/…
— অ্যালক্যালেন
63

সেট আপ করার মতো কয়েকটি জিনিস রয়েছে যাতে ব্রাউজারে আপনার লিঙ্কটি http://yourdomain.com/pathদেখতে ভাল লাগে এবং এগুলি আপনার কৌণিক কনফিগারেশন + সার্ভারের দিক

1) অ্যাঙ্গুলারজেএস

$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 এইচটিএমএল 5 মডেলের সাথে-টু-ওয়ার্ক এছাড়াও এই প্রশ্নটি আপনাকে সহায়তা করতে পারে h এইচটিএমএল 5 এবং হ্যাশবাং মোড / লিঙ্ক পুনর্লিখনের মধ্যে অবস্থান / স্যুইচিং

— lokers
সূত্র
ওহে. আমি উপরের সমাধানটি চেষ্টা করেছিলাম, আমার কনফিগার ফাইলে পরিবর্তন করেছি। কিন্তু এখনও এটি কাজ করে না। ইউআরএল রিফ্রেশ করে তবুও "404 নট ফাউন্ড" ত্রুটি পাওয়া যায়।
— কেটিএন
কীভাবে আমি ওয়েবস্পিয়ারে মোতায়েন অ্যাপে পুনর্নির্দেশ / পুনর্লিখন করব?
— গ্যারি
দেখছি না কেন!
— ২:0
36

আমারও একই সমস্যা ছিল এবং আমি এটি দ্বারা সমাধান করেছি:

  • <base href="https://stackoverflow.com/index.html">সূচী পৃষ্ঠায় ব্যবহার করা

  • নিম্নে আমার নোড / এক্সপ্রেস সার্ভারে সমস্ত রুটের মিডলওয়্যারটিকে একটি ক্যাচ ব্যবহার করে (এটি রাউটারের পরে রাখুন):

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

আমি মনে করি এটি আপনাকে উঠা এবং চলমান করা উচিত।

আপনি যদি অ্যাপাচি সার্ভার ব্যবহার করেন তবে আপনি আপনার লিঙ্কগুলিকে মোড_আরাইট করতে চান। এটি করা কঠিন নয়। কনফিগার ফাইলগুলিতে মাত্র কয়েকটি পরিবর্তন।

ধরে নেওয়া হচ্ছে যে সমস্ত আপনি কৌণিকর উপর html5mode সক্ষম করেছেন। এখন। নোট করুন যে কৌণিক 1.2 তে, বেস ইউআরএল ঘোষণার জন্য আসলে আর সুপারিশ করা হয় না।

— Taye
সূত্র
1
এই সমাধানটি আমার জন্য সেটিং: <base href="https://stackoverflow.com/">এবং আপনার প্রস্তাবিত এক্সপ্রেস রাউটিং যুক্ত করে কাজ করেছিল। অনেক ধন্যবাদ
— গিলাদ পেলেগ
তাহির চাদ, বাস্তবায়ন করার পরেও কি আপনার একটি সার্ভারসাইড ইউআরএল-পুনরায় লেখার প্রয়োজন ছিল <base href="https://stackoverflow.com/index.html">?
— কোডি
হ্যাঁ, আপনি পাথরটিতে আপনার অ্যাপ্লিকেশন / ওয়েবসাইটের বেস ইউআরএল সেট করার উপায় হিসাবে আপনি url পুনরায় লেখা দেখতে পাচ্ছেন (ডোমেন অন্তর্ভুক্ত)। 'বেস ইউআরএল' এইচটিএমএল বিবৃতিটি নিশ্চিত করা যায় যে সমস্ত আপেক্ষিক লিঙ্কগুলি একই বেস থেকে সঠিকভাবে প্রাপ্ত। আপনার লিঙ্কগুলি নিখুঁত হলে বেস ইউআরএল একেবারেই প্রয়োজনীয় নয়।
— তায়ে
1
আমি এটি ব্যবহার করার সময়, আমি কেবল পৃষ্ঠায় এইচটিএমএল কোডটি দেখতে পাচ্ছি, প্রকৃত পৃষ্ঠা হিসাবে রেন্ডার করা হয়নি।
— নোহ
2
এই উত্তরটি ট্রিপল তারার দাবিদার! এই ধরনের সরল উত্তর দেওয়ার জন্য ধন্যবাদ। অন্য প্রত্যেকে "সার্ভার পুনর্নির্দেশের প্রয়োজন" সম্পর্কে একই লাইনের পুনরাবৃত্তি করে।
— আহমেদ হক
27

ব্রাউজারসিঙ্ক এবং গুল্পের জন্য সমাধান।

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() ]
    }
  });
});
— অস্কার
সূত্র
ওহ স্ন্যাপ! শেষ পর্যন্ত কৌণিক দৃষ্টিভঙ্গি থেকে মুক্তি! এবং বোনাস হিসাবে, মানক ইউআরএলগুলি (হ্যাশ-ব্যাং ছাড়াই) রুটও! ধন্যবাদ!
— বিট-কম
1
কবজির মতো কাজ করে ... অনেক অনেক ধন্যবাদ!
— নিশান্ত নায়ার
1
যদি আপনি একটি নির্দিষ্ট পোর্ট ব্যবহার করেন (যেমন আয়নিক ফাঁকা টেম্পলেট 8100 পোর্টে চলমান), তবে সার্ভারের পরে একটি অতিরিক্ত সম্পত্তি server: { ... }, port: 8100যুক্ত করুন, তারপরে কেবলমাত্র serveআপনার ডিফল্ট গল্প টাস্কে (যেমন gulp.task('default', ['sass', 'serve']);) টাস্কটি যুক্ত করুন এবং তারপরে আপনি অ্যাপটি চালাতে পারবেন ছাড়া Cannot GET ...ব্রাউজার ত্রুটি যখন আপনি চালিয়ে পৃষ্ঠাটি রিফ্রেশ gulp। নোট করুন যে সার্ভারটি ionic serveচালানোয় ত্রুটিগুলির মুখোমুখি।
— লুক শোয়েন
আমি যখন উন্নয়নের ব্রাউজারসিঙ্ক ব্যবহার করি তখন এটি ভাল কাজ করে, যখন আমি এক্সপ্রেস অ্যাপ্লিকেশন হিসাবে অ্যাপ্লিকেশনটি চালাচ্ছি এবং অ্যাপ রুট হিসাবে কৌণিক অ্যাপ্লিকেশনটিতে সমস্ত রুটকে পুনর্নির্দেশ করছি ('*', ফাংশন (req, res) {req.session. માન્ય = সত্য ; res.redirect ('/');}); পেজটি লোড হয় না কখন সরাসরি পথ দেয়?
— মিঃ এজে
13

অ্যাপ্লিকেশনটি লোড করার জন্য আপনাকে সূচী। 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?...পরিবর্তে প্রাসঙ্গিক nginx লাইন ছিল index.html। লিঙ্কের জন্য ধন্যবাদ!
— সিজে থম্পসন 21
শীর্ষস্থানীয় উত্তর হওয়া উচিত, আপনার সার্ভার বিবেচনা না করে প্রতিটি পরিস্থিতি দেয়। নোডজেএস
— জো লয়েড
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)
            ];
          }
        }
      }
    }
  })
};
— মুরাত ওরলু
সূত্র
ইউআরএল-এর পুনরায় লেখাটি সম্পন্ন করার জন্য কোনও ম্যানুয়াল উপায় আছে $routeProvider?
1
urlRewriteএটি চালানোর চেষ্টা করার সময় আমার সংজ্ঞাটি সংজ্ঞায়িত করা হয় না এবং পুনরায় লেখার সাথে ডান সংযোগের সন্ধান করতে আমার খুব কষ্ট হচ্ছে I
আমাকে একটি ত্রুটি দেখায় "অবজেক্ট বিল্ডের কোনও পদ্ধতি নেই 'initConfig' চালিয়ে যাওয়ার জন্য - ফোর্স ব্যবহার করুন" "
— এডনবাজরামি
8

আপনি যদি এনজুলারজেএস-এর সাথে এমভিসির সাথে নেট নেট স্ট্যাক করেন তবে ইউআরএল থেকে '#' অপসারণ করতে আপনাকে যা করতে হবে তা হ'ল:

  1. আপনার লেআউট পৃষ্ঠায় আপনার বেস href সেট আপ করুন: <head> <base href="https://stackoverflow.com/"> </head>

  2. তারপরে, আপনার কৌনিক অ্যাপ্লিকেশন কনফিগারেশনে নিম্নলিখিতগুলি যুক্ত করুন: $locationProvider.html5Mode(true)

  3. উপরে ইউআরএল থেকে '#' মুছে ফেলা হবে তবে পৃষ্ঠা রিফ্রেশ কাজ করবে না যেমন আপনি যদি "thyite.com/about" পৃষ্ঠায় থাকেন তবে আপনাকে একটি 404 দেবে This এটি কারণ এমভিসি কৌণিক রাউটিং এবং এমভিসি প্যাটার্ন দ্বারা এটি জানেন না এমভিসি রাউটিং পাথের অস্তিত্ব নেই এমন 'সম্পর্কে' এর জন্য একটি এমভিসি পৃষ্ঠা সন্ধান করবে। এটির কার্যকারিতা হ'ল সমস্ত এমভিসি পৃষ্ঠার অনুরোধটি একটি একক এমভিসি ভিউতে প্রেরণ করা এবং আপনি এটি করতে পারেন এমন একটি রুট যোগ করে যা সমস্ত url ক্যাচ করে

routes.MapRoute(
        name: "App",
        url: "{*url}",
        defaults: new { controller = "Home", action = "Index" }
    );
— Maksood
সূত্র
8

এইচটিএমএল 5 মডে পৃষ্ঠা রিফ্রেশের পরে 404 ত্রুটি রোধ করতে আইআইএস ইউআরএল পুনর্লিখনের নিয়ম

উইন্ডোজ আইআইএস এর অধীনে কৌণিক চলমান জন্য

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

এইচটিএমএল 5 এমোডে পৃষ্ঠা রিফ্রেশের পরে 404 ত্রুটি রোধ করতে নোডজেএস / এক্সপ্রেসজেএস রুটগুলি

নোড / এক্সপ্রেসের অধীনে কৌণিক চলার জন্য

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;

এখানে আরও তথ্য: অ্যাঙ্গুলারজেএস - নোডজেএস এবং আইআইএসে 404 ত্রুটি ছাড়াই HTML5 মোড পৃষ্ঠা রিফ্রেশ সক্ষম করুন

— জেসন
সূত্র
ধন্যবাদ, আইআইএস বিধিগুলি আমাকে অ্যাজুরেতে মোতায়েন করা একটি কৌণিক 2 অ্যাপ্লিকেশনটি সহায়তা করেছিল যা কোনও শিশু পথে যেতে ব্যর্থ হয়েছিল।
— বিটসপ্রিন্ট
আইআইএস (ভিএস 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

আমি আমার দেব পরিবেশে অ্যাপাচি (এক্সএএমএপপি) এবং উত্পাদনে অ্যাপাচি ব্যবহার করছি, যোগ করুন:

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. উপরের সার্ভার আপত্তিটি অনুলিপি করুন
— ওমর
ধন্যবাদ এটি আমার জন্য ব্রাউজারসাইঙ্ক সেটআপ সহ গল্প 4 এ কাজ করেছে।
— আবদালি চন্দনওয়ালা
খুশী হ'ল @ আবদালি চন্দনওয়ালাকে সাহায্য করেছে!
— মিঃ থান্ডার
@ ওম আমি আপনার সাথে একমত নই, আমার মতো কম উন্নত ব্যবহারকারীরা কীভাবে এটি গলফিলিতে যুক্ত করতে পারেন তা দেখে উপকৃত হন। এটা মনে রাখা ভাল যে মানুষের বিভিন্ন স্তরের জ্ঞান রয়েছে এবং গ্রান্টফাইলে কেবল লেখার দরকার পড়ে না কারণ আমি ধরে নিই যে তারা বুঝতে পারে যে এটি কীভাবে ঘূর্ণন ঘটাতে পারে।
— মিঃ থান্ডার
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

আমি বৃহত্তর প্রশ্ন থেকে এই প্রশ্নের উত্তর দিচ্ছি:

আমি যখন $ লোকেশনপ্রভাইডার। Html5 মডেল যুক্ত করি (সত্য), আমার সাইটটি ইউআরএল আটকানোর অনুমতি দেবে না। এইচটিএমএল 5 মডেল সত্য হলে আমি কীভাবে আমার সার্ভারকে কাজ করতে কনফিগার করব?

আপনি যখন এইচটিএমএল 5 মোড সক্ষম করেছেন তখন # টি অক্ষরটি আর আপনার ইউআরএলে ব্যবহৃত হবে না। # প্রতীকটি কার্যকর কারণ এটির জন্য কোনও সার্ভার সাইড কনফিগারেশন প্রয়োজন। # ছাড়াই, ইউআরএলটি দেখতে খুব সুন্দর দেখাচ্ছে তবে এটির জন্য সার্ভারের পাশের পুনর্লিখনগুলিও প্রয়োজন। এখানে কিছু উদাহরন:

অ্যাঙ্গুলারজেএস-এর সাথে এক্সপ্রেস পুনরায় লেখকদের জন্য, আপনি নিম্নলিখিত আপডেটগুলি দিয়ে এটি সমাধান করতে পারেন:

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
সূত্র
ধন্যবাদ এর সমাধান। নোডেজের জন্য app.js এ app.use ('/ *', সূচি) যুক্ত করুন;
— টিগিন
2

আমি বিশ্বাস করি আপনার সমস্যাটি সার্ভারের সাথে সম্পর্কিত। এইচটিএমএল 5 মোডের সাথে কৌনিক ডকুমেন্টেশন (আপনার প্রশ্নের লিঙ্কে) বলেছেন:

সার্ভার সাইড এই মোডটি ব্যবহার করার জন্য সার্ভার সাইডে ইউআরএল পুনর্লিখনের প্রয়োজন হয়, মূলত আপনাকে আপনার অ্যাপ্লিকেশনের প্রবেশের পয়েন্টে আপনার সমস্ত লিঙ্ক পুনরায় লিখতে হবে (যেমন সূচক। Html)

আমি বিশ্বাস করি যে আপনাকে / থেকে / থেকে / ইউআরএল পুনর্লিখন সেটআপ করতে হবে।

— lucuma
সূত্র
আপনার উত্তর করার জন্য আপনাকে ধন্যবাদ। সুতরাং আমি যখন প্রায় পৃষ্ঠায় থাকি এবং আমি রিফ্রেশ করি তখন সার্ভারের / / এ ইউআরএলটি পুনরায় লেখা উচিত? সমস্যাটি হ'ল আমি একটি ভিন্ন ডোমেনে থাকা রেল ব্যাকএন্ডের সাথে কাজ করি। সমস্ত যোগাযোগ এপিআই কল দ্বারা হয়। আমি কীভাবে এই ইউআরএল পুনর্লিখন করব?
— ডিয়েটার ডি মেসেমেকার
জিনিসটি হ'ল আপনার অ্যাপ্লিকেশনটি আপনার সার্ভারের রুটে / তাই আপনার ব্রাউজারটি সম্পর্কে রিফ্রেশ করার সময় আপনার সার্ভার থেকে অনুরোধ করবে যে পৃষ্ঠাটিতে / সম্পর্কে যা আছে (এই ক্ষেত্রে আপনার কোনও পৃষ্ঠা নেই তাই আপনাকে পুনঃনির্দেশিত করতে হবে যারা ফিরে)।
— লুচুমা
2

এক্সপ্রেসে আমাদের একটি সার্ভার পুনর্নির্দেশ ছিল:

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

এবং আমরা যোগ করার পরেও পৃষ্ঠা-রিফ্রেশ সমস্যাগুলি পেয়ে যাচ্ছিলাম <base href="https://stackoverflow.com/" />।

সমাধান: নিশ্চিত করুন যে আপনি নেভিগেট করতে আপনার পৃষ্ঠায় আসল লিঙ্কগুলি ব্যবহার করছেন; URL এ রুটে টাইপ করবেন না বা আপনি একটি পৃষ্ঠা-রিফ্রেশ পাবেন। (নির্বোধ ভুল, আমি জানি)

:-P

— কোডি
সূত্র
তবে এই প্রতিটি পোস্টের অনুরোধের জন্য সূচক ফাইল থাকবে, যেমন:: / getJsonFromServer - একটি HTTP অনুরোধ যা ডেটা ফেরত দেয় তবে এই কনফিগারেশনের কারণে এটি সূচী পৃষ্ঠাটিও ফিরে আসবে
— বিজয়
1

পরিশেষে আমি এই সমস্যাটি সার্ভার পাশ দিয়ে সমাধান করার একটি উপায় পেয়েছি কারণ এটি অ্যাংুলারজেগুলির সাথে ইস্যুটির মতোই আমি নিজেই 1.5 টি অ্যাংুলারজ ব্যবহার করছি এবং পৃষ্ঠাটি পুনরায় লোড করার ক্ষেত্রে আমি একই সমস্যা পেয়েছি। তবে আমার 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

আপনার গ্রান্টফাইলে এর পরে:

 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 । আমি ফিল্টার এবং সমস্ত কৌণিক পৃষ্ঠাগুলির বৈশিষ্ট্যগুলির তালিকা সহ এটি সমাধান করেছি:

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

গুলপ + ব্রাউজারসিঙ্ক:

এনটিএম এর মাধ্যমে কানেক্ট-হিস্ট্রি-এপি-ফ্যালব্যাক ইনস্টল করুন, পরে আপনার সার্ভ গাল্প টাস্কটি কনফিগার করুন

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

gulp.task('serve', function() {
  browserSync.init({
    proxy: {
            target: 'localhost:' + port,
            middleware: [ historyApiFallback() ]
        }
  });
});
— অস্কার ক্যাসিডো
সূত্র
0

আপনার সার্ভারের সাইড কোডটি জাভা হয় তারপরে নীচের পদক্ষেপগুলি অনুসরণ করুন

পদক্ষেপ 1: urlrewritefilter ডাউনলোড করুন JAR এখানে ক্লিক করুন এবং পথ তৈরি করতে সংরক্ষণ করুন ওয়েব- INF / lib

পদক্ষেপ 2: এইচটিএমএল 5 মোড $ লোকেশনপ্রভাইডার এইচটিএমএল 5 সক্ষম করুন (সত্য);

পদক্ষেপ 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
— কৃষ্ণ কুমার Chourasiya
0

আমার এই সহজ সমাধানটি আমি ব্যবহার করছি এবং এর কাজগুলি করছি।

অ্যাপ / ব্যতিক্রম / হ্যান্ডেলআরপিপি-তে

এটি শীর্ষে যুক্ত করুন:

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);
}
— এমেকা মাবাঃ
সূত্র
0

আমি কোড স্নিপেট নীচে নোড.জেএস ফাইলটিতে যুক্ত করে সমস্যার সমাধান করেছি।

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

দ্রষ্টব্য: যখন আমরা পৃষ্ঠাটি রিফ্রেশ করব, তখন এটি কৌনিক পৃষ্ঠার পরিবর্তে API টি সন্ধান করবে (URL- এ # ট্যাগের কারণে নয় of) উপরের কোডটি ব্যবহার করে, আমি # দিয়ে url এ পুনঃনির্দেশ করছি

— রাম গোল্লাপল্লী
সূত্র
-2

কেবলমাত্র ওয়েবকনফিগ-এ একটি নিয়ম লিখুন

<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="/">

এটি আমার পক্ষে কাজ করে সম্ভবত আপনি এইচটিএমএল 5 মডেল অ্যাপকনফিগ সেট করতে ভুলে গেছেন

app.config(function ($stateProvider, $urlRouterProvider, $locationProvider){
    $locationProvider.html5Mode({ enabled: true, requireBase: true });
    $locationProvider.hashPrefix('!');
}
— user3084147
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.