Przeładowanie strony powoduje nieprawidłowe żądanie GET w trybie AngularJS HTML5

193

Chcę włączyć tryb HTML5 dla mojej aplikacji. Podałem następujący kod do konfiguracji, jak pokazano tutaj :

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

Jak widać, użyłem $locationProvider.html5modei zmieniłem wszystkie moje linki, ng-hrefaby wykluczyć /#/.

Problem

W tej chwili mogę przejść do localhost:9000/strony indeksu i przejść do innych stron takich jak localhost:9000/about.

Jednak problem występuje, gdy odświeżam localhost:9000/aboutstronę. Otrzymuję następujące dane wyjściowe:Cannot GET /about

Jeśli spojrzę na połączenia sieciowe:

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

Podczas gdy jeśli najpierw przejdę do, localhost:9000/a następnie kliknę przycisk, który przechodzi do /about, otrzymam:

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

Które renderuje stronę idealnie.

Jak mogę włączyć obsługę kątową, aby uzyskać poprawną stronę po odświeżeniu?

Dieter De Mesmaeker
źródło
1
Rozwiązuję to dla siebie. Zobacz tutaj stackoverflow.com/questions/22394014/…
Sasha B.

Odpowiedzi:

99

Z kątowych dokumentów

Po stronie serwera
Korzystanie z tego trybu wymaga przepisywania adresów URL po stronie serwera, w zasadzie musisz przepisać wszystkie linki do punktu wejścia aplikacji (np. Index.html)

Powodem tego jest to, że kiedy po raz pierwszy odwiedzasz stronę ( /about), np. Po odświeżeniu, przeglądarka nie może wiedzieć, że to nie jest prawdziwy adres URL, więc idzie dalej i ładuje go. Jeśli jednak najpierw załadowałeś stronę główną i cały kod javascript, to po przejściu do /aboutAngulara możesz się tam dostać, zanim przeglądarka spróbuje trafić na serwer i odpowiednio go obsłużyć

James Sharp
źródło
21
Kiedy mówi „musisz przepisać wszystkie linki do punktu wejścia aplikacji (np. Index.html)”, co to oznacza? Czy to oznacza, że ​​muszę wejść w swoje $routeProvideri zmienić ścieżki każdego templateUrlz np. Z templateUrl : '/views/about.html',na templateUrl : 'example.com/views/about.html',?
7
Nie, twoje reguły w $ routeProvider powinny pozostać takie, jakie są. Odpowiedź dotyczy „strony serwera”. Odnosi się do zmiany routingu na serwerze, który udostępnia kątowe strony HTML. Zanim każde żądanie dotrze do aplikacji kątowej, musi najpierw przejść przez routing po stronie serwera, który powinien przepisać wszystkie żądania, aby wskazywały punkt wejścia do aplikacji kątowej (np. „Index.html” lub „/”, w zależności od tego, w jaki sposób trasy działają).
marni
W przypadku, gdy podam mój zminimalizowany plik index.html za pośrednictwem CDN, niż w jaki sposób ten mechanizm routingu zostanie wykonany?
CrazyGeek
1
tak - spójrz na stackoverflow.com/questions/22739455/...
James Sharp
5
Dobry artykuł dla apache, jest przykład htaccess: ngmilk.rocks/2015/03/09/…
Alcalyn
63

Jest kilka rzeczy do skonfigurowania, aby wyglądał twój link w przeglądarce, http://yourdomain.com/patha to jest twoja kątowa konfiguracja + strona serwera

1) AngularJS

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

2) po stronie serwera, po prostu włóż .htaccessdo folderu głównego i wklej to

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

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

Bardziej interesujące rzeczy do przeczytania na temat trybu HTML5 w angularjs i konfiguracji wymaganej dla różnych środowisk https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server -to-work-with-html5mode To pytanie może także pomóc $ location / przełączanie między trybem html5 a hashbang / przepisywanie linków

lokers
źródło
Cześć. Wypróbowałem powyższe rozwiązanie, wprowadziłem zmiany w moim pliku konfiguracyjnym. Ale nadal nie działa. Odświeżenie adresu URL nadal powoduje błąd „404 NIE ZNALEZIONO”.
kTn
Jak przekierować / przepisać w aplikacji wdrożonej w Websphere?
Gary,
Nie rozumiem dlaczego nie!
lokers
36

Miałem podobny problem i rozwiązałem go poprzez:

  • Używanie <base href="https://stackoverflow.com/index.html">na stronie indeksu

  • Używając oprogramowania pośredniczącego catch all route w moim węźle / serwerze Express w następujący sposób (umieść go za routerem):

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

Myślę, że to powinno cię uruchomić.

Jeśli korzystasz z serwera Apache, możesz zmodyfikować linki. To nie jest trudne do zrobienia. Kilka zmian w plikach konfiguracyjnych.

Wszystko to przy założeniu, że masz włączony tryb html5 na angularjs. Teraz. zwróć uwagę, że w kanciastym 1.2, deklarowanie podstawowego adresu URL nie jest już w rzeczywistości zalecane.

Taye
źródło
1
To rozwiązanie działało dla mnie z ustawieniem: <base href="https://stackoverflow.com/">i dodaniem sugerowanego routingu Express. Wielkie dzięki.
Gilad Peleg,
Tahir Chad, czy po wdrożeniu nadal musiałeś używać przepisywania adresu URL na serwerze <base href="https://stackoverflow.com/index.html">?
Cody
Tak, możesz zobaczyć przepisywanie adresu URL jako sposób na ustawienie podstawowego adresu URL twojej aplikacji / strony internetowej w kamieniu (dołączona domena). Instrukcja HTML „base url” jest po prostu sposobem, aby upewnić się, że wszystkie względne linki są poprawnie uzyskane z tej samej bazy. Podstawowy adres URL nie jest absolutnie konieczny, jeśli Twoje linki są bezwzględne.
Taye
1
Gdy go używam, po prostu widzę sam kod HTML na stronie, a nie renderowany jako rzeczywista strona.
Noah
2
Ta odpowiedź zasługuje na potrójne gwiazdki! Dziękujemy za udzielenie tak prostej odpowiedzi. Wszyscy inni tylko powtarzają tę samą linijkę o „konieczności przekierowania serwera”.
Ahmed Haque,
27

Rozwiązanie dla BrowserSync i Gulp.

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

Pierwsza instalacja connect-history-api-fallback:

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

Następnie dodaj go do pliku gulpfile.js:

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

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: "app",
      middleware: [ historyApiFallback() ]
    }
  });
});
Oscar
źródło
O rany! Wreszcie zwolnienie z rozwoju widoku kątowego! Jako bonus, również standardowe trasy URL (bez hash-bang)! Dziękuję Ci!
bitów
1
Działa jak urok ... Wielkie dzięki!
Nishanth Nair
1
Jeśli używasz określonego portu (tj. Pusty szablon Ionic działa na porcie 8100), po prostu dodaj dodatkową właściwość po serwerze, tj. Po server: { ... }, port: 8100prostu dodaj servezadanie do domyślnego zadania gulp (tj. gulp.task('default', ['sass', 'serve']);), A następnie możesz uruchomić aplikację bez Cannot GET ...błędów przeglądarki podczas odświeżania strony przez uruchomienie gulp. Pamiętaj, że uruchomienie serwera z ionic servenadal napotyka błędy.
Luke Schoen
Działa to dobrze, gdy używam programistycznej przeglądarki synchronizacji, w prod używam aplikacji jako aplikacji ekspresowej i przekierowuję całą drogę do aplikacji kątowej jako app.get ('*', function (req, res) {req.session.valid = true ; res.redirect ('/');}); Strona nie ładuje się, gdy bezpośrednio podaje ścieżkę?
AJ
13

Musisz skonfigurować serwer, aby przepisał wszystko do pliku index.html, aby załadować aplikację:

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

dotacja
źródło
1
Idealnym problemem dla mnie było użycie Laravel Forge do zapewnienia serwera, który miał odpowiednią linię nginx try_files $uri $uri/ /index.php?...zamiast potrzebnej index.html. Dzięki za link!
CJ Thompson
Powinna być najlepsza odpowiedź, Daje każdą sytuację bez względu na serwer. Doskonale współpracował z NodeJS
Joe Lloyd
10

Napisałem proste oprogramowanie pośredniczące do podłączania do symulacji przepisywania adresów URL w projektach typu grunt. https://gist.github.com/muratcorlu/5803655

Możesz użyć w ten sposób:

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
źródło
Czy istnieje ręczny sposób na ponowne zapisanie adresu URL w $routeProvider?
1
Dostaję urlRewritenie jest zdefiniowane ostrzeżenie, gdy próbuję go uruchomić, i mam trudności ze znalezieniem odpowiedniego połączenia z przepisaniem, którego mogę użyć.
Pokazuje mi błąd „Kompilacja obiektu nie ma metody„ initConfig ”Użyj --force, aby kontynuować.”
edonbajrami
8

Jeśli jesteś w stosie .NET z MVC z AngularJS, musisz to zrobić, aby usunąć „#” z adresu URL:

  1. Skonfiguruj swój podstawowy href na stronie _Layout: <head> <base href="https://stackoverflow.com/"> </head>

  2. Następnie dodaj następujące elementy w konfiguracji aplikacji kątowej: $locationProvider.html5Mode(true)

  3. Powyżej usunie „#” z adresu URL, ale odświeżenie strony nie będzie działać, np. Jeśli jesteś w „yoursite.com/about” odświeżenie strony da ci 404. Jest tak, ponieważ MVC nie wie o routingu kątowym i według wzoru MVC wyszuka stronę MVC dla „about”, która nie istnieje w ścieżce routingu MVC. Obejściem tego problemu jest wysłanie całego żądania strony MVC do pojedynczego widoku MVC. Możesz to zrobić, dodając trasę, która przechwytuje wszystkie adresy URL


routes.MapRoute(
        name: "App",
        url: "{*url}",
        defaults: new { controller = "Home", action = "Index" }
    );
Maksood
źródło
8

Reguła przepisywania adresów URL IIS, aby zapobiec błędowi 404 po odświeżeniu strony w trybie html5

Do pracy kątowej w IIS w systemie 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>

Trasy NodeJS / ExpressJS, aby zapobiec błędowi 404 po odświeżeniu strony w trybie html5

Do pracy kątowej pod 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;

Więcej informacji na: AngularJS - Włącz odświeżanie strony w trybie HTML5 bez błędów 404 w NodeJS i IIS

Jason
źródło
Dzięki, reguły IIS pomogły mi z aplikacją angular2 wdrożoną na lazurach, która nie mogła skierować się na trasę potomną.
bitsprint
Nie mogę ci wystarczająco podziękować za rozwiązanie dla IIS (localhost w VS 2013). Uderzyłem się w głowę wystarczająco długo z frustracją, w końcu znalazłem tę odpowiedź. Działa jak urok.
Floryda G.
5

Jak wspomnieli inni, musisz przepisać trasy na serwerze i ustawić <base href="https://stackoverflow.com/"/>.

Dla 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
źródło
4

Używam apache (xampp) w moim środowisku deweloperskim i apache w produkcji, dodaj:

errorDocument 404 /index.html

do .htaccess rozwiązać dla mnie ten problem.

crlshn
źródło
4

W przypadku Grunt i Browsersync użyj tutaj connect-modrewrite

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
źródło
15 odpowiedzi powyżej, które były w pasie czasu. 1. npm install connect-modrewrite --save2. require in gruntfile3. skopiuj powyższy serwer obj
Omar
Dzięki temu działało to dla mnie w gulp 4 z konfiguracją browserSync.
Abdeali Chandanwala
Cieszę się, że pomogło @Abdeali Chandanwala!
MrThunder
@Omar Nie zgadzam się z tobą, mniej zaawansowani użytkownicy, tacy jak ja, korzystają z tego, jak dodać go do pliku gulp. Najlepiej pamiętać, że ludzie mają różny poziom wiedzy i po prostu pisanie wymaga w pliku chrząknięcia nie byłoby pomocne, ponieważ zakładam, że rozumieją, jak dodać go do przełknięcia.
MrThunder
3

Rozwiązałem

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
źródło
3

Odpowiadam na to pytanie z większego pytania:

Kiedy dodam $ locationProvider.html5Mode (prawda), moja strona nie zezwala na wklejanie adresów URL. Jak skonfigurować serwer, aby działał, gdy parametr html5Mode jest prawdziwy?

Po włączeniu html5Mode znak # nie będzie już używany w twoich adresach URL. Symbol # jest przydatny, ponieważ nie wymaga konfiguracji po stronie serwera. Bez # adres URL wygląda o wiele ładniej, ale wymaga również przepisywania po stronie serwera. Oto kilka przykładów:

W przypadku Express Rewrites z AngularJS możesz rozwiązać ten problem, wprowadzając następujące aktualizacje:

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

i

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

i

app.use('/',express.static(__dirname + '/public'));
Ironheartbj18
źródło
Dzięki temu rozwiązaniu. Dla Nodejs dodaj do app.js do app.use ('/ *', index);
Tigin
2

Uważam, że twój problem dotyczy serwera. Dokumentacja kątowa dotycząca trybu HTML5 (pod linkiem w twoim pytaniu) stwierdza:

Po stronie serwera Korzystanie z tego trybu wymaga przepisywania adresów URL po stronie serwera, w zasadzie musisz przepisać wszystkie linki do punktu wejścia aplikacji (np. Index.html)

Uważam, że musisz skonfigurować przepisanie adresu URL z / about to /.

Lucuma
źródło
Dziękuję za Twoją odpowiedź. Więc kiedy jestem na stronie z informacjami i odświeżam, serwer powinien przepisać adres URL do /? Problem polega na tym, że pracuję z backendem szyny w innej domenie. Cała komunikacja odbywa się za pośrednictwem wywołań API. Jak mam przepisać te adresy URL?
Dieter De Mesmaeker
Chodzi o to, że twoja aplikacja jest dostępna na twojej trasie serwera / więc kiedy odświeżysz adres URL, który jest / o przeglądarce, poprosi Twój serwer o dowolną stronę w / about (w tym przypadku nie ma tam żadnych stron, więc musisz przekierować te z powrotem).
lucuma
2

Mieliśmy przekierowanie serwera w Express:

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

i nadal występowały problemy z odświeżaniem strony, nawet po dodaniu <base href="https://stackoverflow.com/" />.

Rozwiązanie: upewnij się, że używasz prawdziwych linków na swojej stronie do nawigacji; nie wpisuj trasy w adresie URL, w przeciwnym razie nastąpi odświeżenie strony. (głupi błąd, wiem)

:-P

Cody
źródło
ale z powodu KAŻDEGO żądania http będzie miał plik indeksu, np .: / getJsonFromServer - żądanie HTTP, które zwraca dane, ale z powodu tej konfiguracji zwróci również stronę indeksu
vijay
1

W końcu udało mi się rozwiązać ten problem po stronie serwera, ponieważ jest to bardziej problem z samym AngularJs. Używam 1.5 Angularjs i mam ten sam problem przy przeładowaniu strony. Ale po dodaniu poniższego kodu do mojego server.jspliku oszczędza mi to dzień, ale nie jest to właściwe rozwiązanie ani dobry sposób.

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

Znalazłem jeszcze lepszą wtyczkę Grunt, która działa, jeśli masz index.html i Gruntfile.js w tym samym katalogu;

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

Następnie w swoim pliku 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
źródło
Moduł grunt-connect-pushstate jest przestarzały
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
źródło
0

Miałem ten sam problem z java + aplikacją kątową wygenerowaną za pomocą JHipstera . Rozwiązałem go za pomocą filtru i listy wszystkich stron kątowych we właściwościach:

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

Mam nadzieję, że będzie to pomocne dla kogoś.

Igor Zboichik
źródło
0

Gulp + browserSync:

Zainstaluj connect-history-api-fallback za pomocą npm, a następnie skonfiguruj swoje zadanie obsługi gulp

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

gulp.task('serve', function() {
  browserSync.init({
    proxy: {
            target: 'localhost:' + port,
            middleware: [ historyApiFallback() ]
        }
  });
});
Oscar Caicedo
źródło
0

Kod po stronie serwera to JAVA, a następnie Wykonaj poniższe czynności

krok 1: Pobierz plik JAR urlrewritefilter Kliknij tutaj i zapisz, aby zbudować ścieżkę WEB-INF / lib

krok 2: Włącz tryb HTML5 $ locationProvider.html5Mode (true);

krok 3: ustaw podstawowy adres URL <base href="https://stackoverflow.com/example.com/"/>

krok 4: skopiuj i wklej do swojego 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>

krok 5: utwórz plik w 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
źródło
Jak dodać regułę dla dynamicznego
adresu
0

Mam to proste rozwiązanie, z którego korzystam i które działa.

W aplikacji / Wyjątki / Handler.php

Dodaj to u góry:

use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

Następnie w metodzie renderowania

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
źródło
0

Rozwiązałem problem, dodając poniższy fragment kodu do pliku node.js.

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

Uwaga: gdy odświeżamy stronę, będzie ona szukała interfejsu API zamiast strony kątowej (z powodu braku tagu # w adresie URL). Korzystając z powyższego kodu, przekierowuję na adres URL za pomocą #

Ram Gollapalli
źródło
-2

Wystarczy napisać regułę w pliku 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>

W indeksie dodaj to

<base href="/">

działa dla mnie może zapomniałeś ustawić Html5Mode app.config

app.config(function ($stateProvider, $urlRouterProvider, $locationProvider){
    $locationProvider.html5Mode({ enabled: true, requireBase: true });
    $locationProvider.hashPrefix('!');
}
użytkownik3084147
źródło