Sayfayı yeniden yüklemek AngularJS HTML5 modu ile yanlış GET isteği veriyor

Uygulamam için HTML5 modunu etkinleştirmek istiyorum. Burada gösterildiği gibi yapılandırma için aşağıdaki kodu koydum :

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'
    });

Gördüğünüz gibi, kullandığım $locationProvider.html5modeve ben hiç benim bağlantıları değişti ng-hrefdışlamak için /#/.

Sorun

Şu anda localhost:9000/dizin sayfasına gidip görebiliyorum ve diğer sayfalara gidebiliyorum localhost:9000/about.

Ancak, localhost:9000/aboutsayfayı yenilediğimde sorun oluşur . Aşağıdaki çıktıyı alıyorum:Cannot GET /about

Şebeke çağrılarına bakarsam:

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

Ben ilk gidip localhost:9000/sonra gitmek için bir düğmeye tıklayın ise /about:

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

Hangi sayfa mükemmel hale getirir.

Yenilediğimde açısal sayfanın doğru sayfayı almasını nasıl sağlayabilirim?

Gönderen açısal docs

Sunucu tarafı
Bu modu kullanmak için sunucu tarafında URL'nin yeniden yazılması gerekir, temel olarak uygulamanızın giriş noktasına olan tüm bağlantılarınızı yeniden yazmanız gerekir (örn. İndex.html)

Bunun nedeni, sayfayı ilk kez ziyaret ettiğinizde ( /about), örneğin bir yenilemeden sonra, tarayıcının bunun gerçek bir URL olmadığını bilmesinin bir yolu olmadığından devam eder ve yükler. Ancak önce kök sayfayı ve tüm javascript kodunu yüklediyseniz, /aboutAngular'a gittiğinizde tarayıcı sunucuya vurmaya ve buna göre işlemeye başlamadan önce oraya girebilirsiniz.

Ayarlanması gereken birkaç şey var, böylece tarayıcıdaki bağlantınız benzeyecek http://yourdomain.com/pathve bunlar açısal yapılandırma + sunucu tarafınız

1) Açısal JS

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

2) sunucu tarafı, sadece .htaccesskök klasörünüzün içine koyun ve yapıştırın

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

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

Angularjs'de html5 modu ve farklı ortamlar için gerekli yapılandırma hakkında daha ilginç şeyler https://github.com/angular-ui/ui-router/wiki/Frequent-Asked-Questions#how-to-configure-your-server -to-work-with-html5mode Ayrıca bu soru $ location / html5 ve hashbang modu / link yeniden yazma arasında geçiş yapmanıza yardımcı olabilir

Benzer bir sorun yaşadım ve şu şekilde çözdüm:

• <base href="https://stackoverflow.com/index.html">Dizin sayfasında kullanma

• Düğümüm / Express sunucumdaki tüm yol orta katmanını yakala özelliğini aşağıdaki gibi kullanın (yönlendiriciden sonra koyun):

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

Bence bu seni harekete geçirmeli.

Bir apache sunucusu kullanıyorsanız, bağlantılarınızı mod_rewrite etmek isteyebilirsiniz. Bunu yapmak zor değil. Yapılandırma dosyalarında sadece birkaç değişiklik.

Tüm bunlar, açısaljslerde html5mode özelliğini etkinleştirdiğinizi varsayar. Şimdi. açısal 1.2'de, artık bir temel url bildirilmesinin artık tavsiye edilmediğini unutmayın.

BrowserSync ve Gulp için çözüm.

Gönderen https://github.com/BrowserSync/browser-sync/issues/204#issuecomment-102623643

İlk kurulum connect-history-api-fallback:

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

Ardından gulpfile.js dosyasına ekleyin:

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

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: "app",
      middleware: [ historyApiFallback() ]
    }
  });
});

Uygulamayı yüklemek için sunucunuzu index.html dosyasına her şeyi yeniden yazacak şekilde yapılandırmanız gerekir:

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

Grunt projelerinde url-yeniden yazmayı simüle etmek için basit bir bağlantı ara katmanı yazdım. https://gist.github.com/muratcorlu/5803655

Bunun gibi kullanabilirsiniz:

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)
            ];
          }
        }
      }
    }
  })
};

AngularJS ile MVC ile .NET yığınındaysanız, URL'den '#' kaldırmak için yapmanız gereken budur:

1. _Layout sayfanızda temel href'nizi ayarlayın: <head> <base href="https://stackoverflow.com/"> </head>

2. Ardından, açısal uygulama yapılandırmanıza aşağıdakileri ekleyin: $locationProvider.html5Mode(true)

3. Yukarıda '#' URL'den kaldırılacak, ancak sayfa yenileme çalışmaz, örneğin "siteniz.com/about" sayfasındaysanız sayfa yenilemesi size bir 404 verecektir. Bunun nedeni, MVC'nin açısal yönlendirme hakkında bilgi sahibi olmaması ve MVC kalıbıyla MVC yönlendirme yolunda bulunmayan 'about' için bir MVC sayfası arayacaktır. Bunun çözümü, tüm MVC sayfa isteklerini tek bir MVC görünümüne göndermek ve bunu tüm URL'leri yakalayan bir rota ekleyerek yapabilirsiniz

routes.MapRoute(
        name: "App",
        url: "{*url}",
        defaults: new { controller = "Home", action = "Index" }
    );

Html5mode'da sayfa yenilendikten sonra 404 hatasını önlemek için IIS URL Yeniden Yazma Kuralı

Windows'da IIS altında açısal çalışma için

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

NodeJS / ExpressJS Html5mode'da sayfa yenilendikten sonra 404 hatasını önlemek için yönlendirilir

Düğüm / Ekspres altında açısal çalışma için

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;

Daha fazla bilgi için: AngularJS - NodeJS ve IIS'de 404 Hatası Olmadan HTML5 Modu Sayfa Yenilemesini Etkinleştir

Diğerlerinin de belirttiği gibi, yolları sunucuda yeniden yazmanız ve ayarlamanız gerekir <base href="https://stackoverflow.com/"/>.

Şunun için 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()
    ];
  }
  ...
})
....

Geliştirme ortamımda apache (xampp) ve üretimde apache kullanıyorum:

errorDocument 404 /index.html

.htaccess benim için bu sorunu çözmek.

Grunt ve Browsersync için burada connect-modrewrite kullanın

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

Çözdüm

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')
                  ];
              }
        }
      },

Bu soruyu büyük sorudan cevaplıyorum:

$ LocationProvider.html5Mode (true) eklediğimde, sitem URL'lerin yapıştırılmasına izin vermiyor. Html5Mode doğru olduğunda sunucumu çalışacak şekilde nasıl yapılandırabilirim?

Html5Mode'u etkinleştirdiğinizde, # karakteri artık URL'lerinizde kullanılmayacak. # Sembolü, sunucu tarafı yapılandırması gerektirmediği için kullanışlıdır. # Olmadan, url çok daha hoş görünüyor, ancak aynı zamanda sunucu tarafı yeniden yazma işlemleri gerektiriyor. İşte bazı örnekler:

AngularJS ile Hızlı Yeniden Yazmalar için, bunu aşağıdaki güncellemelerle çözebilirsiniz:

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

ve

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

ve

app.use('/',express.static(__dirname + '/public'));

Sorununuzun sunucu ile ilgili olduğuna inanıyorum. HTML5 modu ile ilgili açısal belgeler (sorunuzun bağlantısında) şunları belirtir:

Sunucu tarafı Bu modu kullanmak için sunucu tarafında URL'nin yeniden yazılması gerekir, temel olarak uygulamanızın giriş noktasına olan tüm bağlantılarınızı yeniden yazmanız gerekir (örn. İndex.html)

/ About to / arasında bir url yeniden yazma ayarı yapmanız gerekeceğine inanıyorum.

Express'te bir sunucu yönlendirmesi yaptık:

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

ve ekledikten sonra bile sayfa yenileme sorunları alıyorduk <base href="https://stackoverflow.com/" />.

Çözüm: Gezinmek için sayfanızda gerçek bağlantılar kullandığınızdan emin olun; URL'deki rotayı yazmayın, aksi takdirde bir sayfa yenileme alırsınız. (aptalca hata, biliyorum)

:-P

Nihayet AngularJs kendisi ile ilgili bir sorun gibi daha 1.5 Angularjs kullanıyorum ve ben sayfayı yeniden yükleme aynı sorunu var gibi sunucu tarafı tarafından bu sorunu çözmek için bir yol var. Ama dosyama aşağıdaki kodu ekledikten sonra günümü server.jskurtarmak ama bu uygun bir çözüm ya da iyi bir yol değil.

app.use(function(req, res, next){
  var d = res.status(404);
     if(d){
        res.sendfile('index.html');
     }
});

Aynı dizinde index.html ve Gruntfile.js'ye sahipseniz çalışan daha iyi Grunt eklentisi buldum;

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

Bundan sonra Gruntfile dosyasında:

 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)
          ];
        }
      },
    }
},

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
        });
    }

JHipster ile oluşturulan java + açısal uygulama ile aynı sorunu vardı . Filtre ve özelliklerindeki tüm açısal sayfaların listesi ile çözdüm:

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);
}

Umarım biri için faydalı olacaktır.

Gulp + tarayıcı

Npm üzerinden connect-history-api-fallback'i kurun, daha sonra servis yutmak görevinizi yapılandırın

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

gulp.task('serve', function() {
  browserSync.init({
    proxy: {
            target: 'localhost:' + port,
            middleware: [ historyApiFallback() ]
        }
  });
});

Sunucu tarafı kodunuz JAVA ise aşağıdaki adımları izleyin

Adım 1: urlrewritefilter JAR indir Buraya tıklayın ve WEB-INF / lib yolu oluşturmak için kaydedin

2. adım: HTML5 Modunu etkinleştirin $ locationProvider.html5Mode (true);

3. adım: temel URL'yi ayarlayın <base href="https://stackoverflow.com/example.com/"/>

4. adım: kopyalayıp WEB.XML'nize yapıştırın

 <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.Adım: WEN-INF / urlrewrite.xml'de dosya oluşturun

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

Kullandığım bu basit çözüme ve işlerine sahibim.

Uygulamada / İstisnalar / Handler.php

Bunu en üste ekle:

use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

Sonra render yönteminin içinde

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);
}

Node.js dosyasına aşağıdaki kod snippet'ini ekleyerek sorunu çözdüm.

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

Not: Sayfayı yenilediğimizde, Açısal sayfa yerine API'yı arar (URL'de # etiketi olmadığından). Yukarıdaki kodu kullanarak, # ile url'e yönlendiriyorum

Web.config dosyasına bir kural yazmanız yeterlidir

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

Dizine bunu ekleyin

<base href="/">

benim için çalışıyor olabilir belki Html5Mode app.config ayarını unuttun

app.config(function ($stateProvider, $urlRouterProvider, $locationProvider){
    $locationProvider.html5Mode({ enabled: true, requireBase: true });
    $locationProvider.hashPrefix('!');
}