Das Neuladen der Seite führt zu einer falschen GET-Anforderung im AngularJS HTML5-Modus

193

Ich möchte den HTML5-Modus für meine App aktivieren. Ich habe den folgenden Code für die Konfiguration eingegeben, wie hier gezeigt :

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

Wie Sie sehen können, habe ich das verwendet $locationProvider.html5modeund alle meine Links am geändert ng-href, um das auszuschließen /#/.

Das Problem

Im Moment kann ich auf localhost:9000/die Indexseite gehen und zu den anderen Seiten wie navigieren localhost:9000/about.

Das Problem tritt jedoch auf, wenn ich die localhost:9000/aboutSeite aktualisiere . Ich erhalte folgende Ausgabe:Cannot GET /about

Wenn ich mir die Netzwerkaufrufe ansehe:

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

Wenn ich zum ersten Mal gehe localhost:9000/und dann auf eine Schaltfläche klicke, die zu navigiert, /abouterhalte ich:

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

Das macht die Seite perfekt.

Wie kann ich Angular aktivieren, um beim Aktualisieren die richtige Seite zu erhalten?

Dieter De Mesmaeker
quelle
1
Ich löse es für mich. Siehe hier stackoverflow.com/questions/22394014/…
Sasha B.

Antworten:

99

Aus den eckigen Dokumenten

Serverseite
Wenn Sie diesen Modus verwenden, müssen Sie die URL auf der Serverseite neu schreiben. Grundsätzlich müssen Sie alle Links zum Einstiegspunkt Ihrer Anwendung neu schreiben (z. B. index.html).

Der Grund dafür ist, dass /aboutder Browser beim ersten Besuch der Seite ( ), z. B. nach einer Aktualisierung, nicht wissen kann, dass es sich nicht um eine echte URL handelt. Daher wird diese fortgeführt und geladen. Wenn Sie jedoch zuerst die Stammseite und den gesamten Javascript-Code geladen haben, können Sie beim Navigieren zu /aboutAngular dort hineinkommen, bevor der Browser versucht, den Server zu erreichen und entsprechend zu behandeln

James Sharp
quelle
21
Was bedeutet es, wenn "Sie müssen alle Ihre Links zum Einstiegspunkt Ihrer Anwendung (z. B. index.html) neu schreiben" steht? Bedeutet das, dass ich in meine gehen $routeProviderund die Wege jedes einzelnen ändern muss, templateUrlz. B. von templateUrl : '/views/about.html',nach templateUrl : 'example.com/views/about.html',?
7
Nein, Ihre Regeln in $ routeProvider sollten unverändert bleiben. Die Antwort bezieht sich auf "Server-Seite". Es bezieht sich auf das Ändern des Routings auf dem Server, der Ihre eckigen HTML-Seiten bereitstellt. Bevor jede Anforderung an Ihre eckige App gesendet wird, muss sie zuerst das serverseitige Routing durchlaufen. Dabei sollten alle Anforderungen neu geschrieben werden, um auf Ihren eckigen App-Einstiegspunkt zu verweisen (z. B. 'index.html' oder '/', je nachdem, wie eckig Sie sind Routen arbeiten).
März
Falls ich meine minimierte index.html über ein CDN bereitstelle, wie wird dieser Routing-Mechanismus ausgeführt?
CrazyGeek
1
Ja - werfen Sie
James Sharp
5
Guter Artikel für Apache, es gibt ein htaccess-Beispiel: ngmilk.rocks/2015/03/09/…
Alcalyn
63

Es müssen nur wenige Dinge eingerichtet werden, damit Ihr Link im Browser so aussieht, http://yourdomain.com/pathund dies ist Ihre eckige Konfigurations- + Serverseite

1) AngularJS

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

2) Server-Seite, legen .htaccessSie es einfach in Ihrem Stammordner ab und fügen Sie diesen ein

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

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

Weitere interessante Informationen zum HTML5-Modus in AngularJS und zur Konfiguration, die für verschiedene Umgebungen erforderlich ist: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server -to-work-with-html5mode Auch diese Frage kann Ihnen helfen, $ location / umschalten zwischen html5 und Hashbang-Modus / Link-Umschreiben

Loker
quelle
Hallo. Ich habe die obige Lösung ausprobiert und Änderungen in meiner Konfigurationsdatei vorgenommen. Aber es funktioniert immer noch nicht. Beim Aktualisieren der URL wird weiterhin der Fehler "404 NOT FOUND" angezeigt.
kTn
Wie leite ich eine in Websphere bereitgestellte App um / schreibe sie neu?
Gary
Ich verstehe nicht warum nicht!
Lokers
36

Ich hatte ein ähnliches Problem und löste es durch:

  • Verwendung <base href="https://stackoverflow.com/index.html">auf der Indexseite

  • Verwenden Sie eine Catch-All-Route-Middleware in meinem Knoten / Express-Server wie folgt (setzen Sie sie hinter den Router):

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

Ich denke, das sollte dich zum Laufen bringen.

Wenn Sie einen Apache-Server verwenden, möchten Sie möglicherweise Ihre Links mod_rewrite. Es ist nicht schwer zu tun. Nur ein paar Änderungen in den Konfigurationsdateien.

Alles, was vorausgesetzt wird, dass Sie html5mode für anglejs aktiviert haben. Jetzt. Beachten Sie, dass in Winkel 1.2 das Deklarieren einer Basis-URL eigentlich nicht mehr empfohlen wird.

Taye
quelle
1
Diese Lösung funktionierte für mich mit der Einstellung: <base href="https://stackoverflow.com/">und dem Hinzufügen des von Ihnen vorgeschlagenen Express-Routings. Vielen Dank.
Gilad Peleg
Tahir Chad, mussten Sie nach der Implementierung des noch eine serverseitige URL-Umschreibung verwenden <base href="https://stackoverflow.com/index.html">?
Cody
Ja, Sie können das Umschreiben von URLs als eine Möglichkeit sehen, die Basis-URL Ihrer Anwendung / Website in Stein zu setzen (einschließlich Domain). Die HTML-Anweisung 'base url' ist nur eine Möglichkeit, um sicherzustellen, dass alle relativen Links korrekt von derselben Basis abgeleitet werden. Die Basis-URL ist nicht unbedingt erforderlich, wenn Ihre Links absolut sind.
Taye
1
Wenn ich dies verwende, sehe ich nur den HTML-Code selbst auf der Seite, der nicht als tatsächliche Seite gerendert wird.
Noah
2
Diese Antwort verdient dreifache Sterne! Vielen Dank für die einfache Antwort. Alle anderen wiederholen nur die gleiche Zeile über "Serverumleitung erforderlich".
Ahmed Haque
27

Lösung für BrowserSync und Gulp.

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

Erste Installation connect-history-api-fallback:

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

Dann füge es deiner gulpfile.js hinzu:

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

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: "app",
      middleware: [ historyApiFallback() ]
    }
  });
});
Oscar
quelle
Oh verdammt! Endlich Erleichterung von Angular View Development! Und als Bonus auch Standard-URLs (ohne Hash-Bang)! Danke dir!
Bitless
1
Funktioniert wie ein Zauber ... Vielen Dank!
Nishanth Nair
1
Wenn Sie einen bestimmten Port verwenden (dh die leere Ionic-Vorlage wird auf Port 8100 ausgeführt), fügen Sie nach dem Server einfach eine zusätzliche Eigenschaft hinzu, dh server: { ... }, port: 8100fügen Sie die serveAufgabe einfach Ihrer Standard-Gulp-Aufgabe (dh gulp.task('default', ['sass', 'serve']);) hinzu, und Sie können die App ausführen ohne die Cannot GET ...Browserfehler, wenn Sie die Seite durch Ausführen aktualisieren gulp. Beachten Sie, dass beim Ausführen des Servers ionic serveimmer noch die Fehler auftreten.
Luke Schoen
Dies funktioniert gut, wenn ich Development Browsersync verwende. In prod führe ich die Anwendung als Express-App aus und leite die gesamte Route zur eckigen App als app.get um ('*', function (req, res) {req.session.valid = true ; res.redirect ('/');}); Die Seite wird nicht geladen, wenn der Pfad direkt angegeben wird?
Herr AJ
13

Sie müssen Ihren Server so konfigurieren, dass alles in index.html umgeschrieben wird, um die App zu laden:

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

gewähren
quelle
1
Perfekt, das Problem für mich war, Laravel Forge zu verwenden, um den Server bereitzustellen, der die relevante Nginx-Zeile try_files $uri $uri/ /index.php?...anstelle der benötigten hatte index.html. Danke für den Link!
CJ Thompson
Sollte die beste Antwort sein, gibt jede Situation unabhängig von Ihrem Server. Arbeitete perfekt mit NodeJS
Joe Lloyd
10

Ich habe eine einfache Connect-Middleware geschrieben, um das Umschreiben von URLs in Grunzprojekten zu simulieren. https://gist.github.com/muratcorlu/5803655

Sie können so verwenden:

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)
            ];
          }
        }
      }
    }
  })
};
Murat Çorlu
quelle
Gibt es eine manuelle Möglichkeit, das Umschreiben von URLs im Internet durchzuführen $routeProvider?
1
urlRewriteBeim Versuch, es auszuführen , wird keine definierte Warnung angezeigt, und es fällt mir schwer, die richtige Verbindung zum Umschreiben zu finden, die ich verwenden kann.
Zeigt mir einen Fehler "Objektaufbau hat keine Methode 'initConfig' Verwenden Sie --force, um fortzufahren."
Edonbajrami
8

Wenn Sie sich im .NET-Stack mit MVC mit AngularJS befinden, müssen Sie Folgendes tun, um das '#' aus der URL zu entfernen:

  1. Richten Sie Ihre Basis-HREF auf Ihrer _Layout-Seite ein: <head> <base href="https://stackoverflow.com/"> </head>

  2. Fügen Sie dann Folgendes in Ihre eckige App-Konfiguration ein: $locationProvider.html5Mode(true)

  3. Oben wird '#' aus der URL entfernt, aber die Seitenaktualisierung funktioniert nicht, z. B. wenn Sie sich in der Seitenaktualisierung "yoursite.com/about" befinden, erhalten Sie eine 404. Dies liegt daran, dass MVC das Winkelrouting und das MVC-Muster nicht kennt sucht nach einer MVC-Seite für 'about', die im MVC-Routing-Pfad nicht vorhanden ist. Um dieses Problem zu umgehen, senden Sie alle MVC-Seitenanforderungen an eine einzelne MVC-Ansicht. Sie können dies tun, indem Sie eine Route hinzufügen, die alle URLs abfängt


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

IIS URL Rewrite Rule, um 404-Fehler nach der Seitenaktualisierung im HTML5-Modus zu vermeiden

Für eckige Ausführung unter IIS unter Windows

<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-Routen zur Verhinderung von 404-Fehlern nach Seitenaktualisierung im HTML5-Modus

Für Winkellauf unter Node / Express

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;

Weitere Informationen unter: AngularJS - Aktivieren der Seitenaktualisierung im HTML5-Modus ohne 404-Fehler in NodeJS und IIS

Jason
quelle
Dank der IIS-Regeln konnte ich eine Angular2-App verwenden, die in Azure bereitgestellt wurde und nicht auf eine untergeordnete Route geleitet werden konnte.
Bitsprint
Ich kann Ihnen nicht genug für die Lösung für IIS (localhost in VS 2013) danken. Ich habe lange genug frustriert gegen meinen Kopf geschlagen und endlich diese Antwort gefunden. Lief wie am Schnürchen.
Florida G.
5

Wie bereits erwähnt, müssen Sie Routen auf dem Server neu schreiben und festlegen <base href="https://stackoverflow.com/"/>.

Für 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()
    ];
  }
  ...
})
....
Brett
quelle
4

Ich verwende Apache (xampp) in meiner Entwicklungsumgebung und Apache in der Produktion. Fügen Sie hinzu:

errorDocument 404 /index.html

Um den .htaccess für mich dieses Problem zu lösen.

crlshn
quelle
4

Für Grunt und Browsersync verwenden connect-modrewrite hier

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
quelle
Es gibt 15 über dieser Antwort, die eine Taille der Zeit waren. 1. npm install connect-modrewrite --save2. require in gruntfile3. Kopieren Sie das obige Serverobjekt
Omar
Danke, das hat bei mir in gulp 4 mit browserSync Setup funktioniert.
Abdeali Chandanwala
Ich bin froh, dass es @Abdeali Chandanwala geholfen hat!
MrThunder
@Omar Ich bin nicht einverstanden mit Ihnen, weniger fortgeschrittene Benutzer wie ich profitieren davon, wie sie es zum gulpfile hinzufügen können. Es ist am besten, sich daran zu erinnern, dass Menschen unterschiedliche Wissensniveaus haben und nur das Schreiben in Gruntfile erforderlich wäre, wäre nicht hilfreich, da ich davon ausgehen würde, dass sie verstehen, wie man es zum Schlucken hinzufügt.
MrThunder
3

Ich habe es gelöst

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')
                  ];
              }
        }
      },
Silvio Troia
quelle
3

Ich beantworte diese Frage aus der größeren Frage:

Wenn ich $ locationProvider.html5Mode (true) hinzufüge, erlaubt meine Site das Einfügen von URLs nicht. Wie konfiguriere ich meinen Server so, dass er funktioniert, wenn html5Mode wahr ist?

Wenn Sie html5Mode aktiviert haben, wird das Zeichen # nicht mehr in Ihren URLs verwendet. Das Symbol # ist nützlich, da keine serverseitige Konfiguration erforderlich ist. Ohne # sieht die URL viel besser aus, erfordert aber auch serverseitige Umschreibungen. Hier sind einige Beispiele:

Für Express-Umschreibungen mit AngularJS können Sie dies mit den folgenden Updates lösen:

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

und

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

und

app.use('/',express.static(__dirname + '/public'));
Ironheartbj18
quelle
Danke, es ist die Lösung. Für Nodejs zu app.js zu app.use hinzufügen ('/ *', Index);
Tigin
2

Ich glaube, Ihr Problem betrifft den Server. In der eckigen Dokumentation zum HTML5-Modus (unter dem Link in Ihrer Frage) heißt es:

Serverseite Wenn Sie diesen Modus verwenden, müssen Sie die URL auf der Serverseite neu schreiben. Grundsätzlich müssen Sie alle Links zum Einstiegspunkt Ihrer Anwendung (z. B. index.html) neu schreiben.

Ich glaube, Sie müssen eine URL-Umschreibung von / about nach / einrichten.

lucuma
quelle
Vielen Dank für Ihre Antwort. Wenn ich mich also auf der About-Seite befinde und aktualisiere, sollte der Server die URL in /? Das Problem ist, dass ich mit einem Rails-Backend arbeite, das sich in einer anderen Domäne befindet. Die gesamte Kommunikation erfolgt über API-Aufrufe. Wie würde ich diese URL neu schreiben?
Dieter De Mesmaeker
Die Sache ist, dass Ihre App auf Ihrer Serverroute von / verfügbar ist. Wenn Sie also eine URL aktualisieren, die / über den Browser von Ihrem Server angefordert wird, welche Seite sich auf / über befindet (in diesem Fall haben Sie dort keine Seiten, sodass Sie umleiten müssen die zurück).
Lucuma
2

Wir hatten eine Serverumleitung in Express:

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

und wir bekamen immer noch Probleme mit der Seitenaktualisierung, selbst nachdem wir das hinzugefügt hatten <base href="https://stackoverflow.com/" />.

Lösung: Stellen Sie sicher, dass Sie zum Navigieren echte Links auf Ihrer Seite verwenden. Geben Sie die Route nicht in die URL ein, sonst erhalten Sie eine Seitenaktualisierung. (dummer Fehler, ich weiß)

:-P

Cody
quelle
Aufgrund dieser JEDEN http-Anfrage wird jedoch eine Indexdatei vorhanden sein, z. B.: / getJsonFromServer - eine http-Anfrage, die Daten zurückgibt. Aufgrund dieser Konfiguration wird jedoch auch die Indexseite zurückgegeben
vijay
1

Endlich habe ich eine Möglichkeit, dieses Problem auf der Serverseite zu lösen, da es eher ein Problem mit AngularJs selbst ist. Ich verwende 1,5 Angularjs und habe das gleiche Problem beim erneuten Laden der Seite. Aber nachdem ich den folgenden Code in meine server.jsDatei eingefügt habe , ist es mein Tag, aber es ist keine richtige Lösung oder kein guter Weg.

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

Ich habe ein noch besseres Grunt-Plugin gefunden, das funktioniert, wenn Sie Ihre index.html und Gruntfile.js im selben Verzeichnis haben.

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

Danach in deinem 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)
          ];
        }
      },
    }
},
Michał Lach
quelle
Das Grunt-Connect-Pushstate-Modul ist veraltet
Evan Plaice
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
quelle
0

Ich hatte das gleiche Problem mit der mit JHipster generierten Java + Angular App . Ich habe es mit Filter und Liste aller eckigen Seiten in Eigenschaften gelöst:

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

Hoffe, es wird für jemanden hilfreich sein.

Igor Zboichik
quelle
0

Gulp + browserSync:

Installieren Sie connect-history-api-fallback über npm und konfigurieren Sie später Ihre Serve-Gulp-Aufgabe

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

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

Ihr serverseitiger Code lautet JAVA. Führen Sie dann die folgenden Schritte aus

Schritt 1: Download urlrewritefilter JAR Klicken Sie hier und speichern Sie, um den Pfad WEB-INF / lib zu erstellen

Schritt 2: Aktivieren Sie den HTML5-Modus $ locationProvider.html5Mode (true);

Schritt 3: Basis-URL festlegen <base href="https://stackoverflow.com/example.com/"/>

Schritt 4: Kopieren und Einfügen in Ihre 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>

Schritt 5: Erstellen Sie eine Datei in 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>
senthil raja
quelle
Wie man eine Regel für eine dynamische URL hinzufügt wie - test.com/user/101 test.com/user/102
Krishna Kumar Chourasiya
0

Ich habe diese einfache Lösung, die ich verwendet habe, und ihre Funktionen.

In App / Exceptions / Handler.php

Fügen Sie dies oben hinzu:

use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

Dann innerhalb der Rendermethode

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);
}
Emeka Mbah
quelle
0

Ich habe das Problem behoben, indem ich das folgende Codeausschnitt in die Datei node.js eingefügt habe.

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

Hinweis: Wenn wir die Seite aktualisieren, wird nach der API anstelle der Angular-Seite gesucht (da die URL kein # -Tag enthält). Mit dem obigen Code leite ich mit # zur URL um

Ram Gollapalli
quelle
-2

Schreiben Sie einfach eine Regel in 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>

Fügen Sie dies im Index hinzu

<base href="/">

es funktioniert bei mir, vielleicht haben Sie vergessen, Html5Mode app.config festzulegen

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