Le rechargement de la page donne une demande GET erronée avec le mode AngularJS HTML5

193

Je souhaite activer le mode HTML5 pour mon application. J'ai mis le code suivant pour la configuration, comme indiqué ici :

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

Comme vous pouvez le voir, j'ai utilisé le $locationProvider.html5modeet j'ai changé tous mes liens aung-href pour exclure le /#/.

Le problème

Pour le moment, je peux aller localhost:9000/voir la page d'index et naviguer vers les autres pages comme localhost:9000/about.

Cependant, le problème se produit lorsque j'actualise la localhost:9000/aboutpage. J'obtiens la sortie suivante:Cannot GET /about

Si je regarde les appels réseau:

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

Alors que si je vais d'abord sur localhost:9000/puis cliquez sur un bouton qui accède à, /aboutj'obtiens:

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

Ce qui rend la page parfaitement.

Comment puis-je activer angulaire pour obtenir la bonne page lorsque je rafraîchis?

Dieter De Mesmaeker
la source
1
Je le résous pour moi. Voir ici stackoverflow.com/questions/22394014/…
Sasha B.

Réponses:

99

Des documents angulaires

Côté serveur L'
utilisation de ce mode nécessite une réécriture d'URL côté serveur, fondamentalement vous devez réécrire tous vos liens vers le point d'entrée de votre application (par exemple index.html)

La raison en est que lorsque vous visitez la page ( /about), par exemple après une actualisation, le navigateur n'a aucun moyen de savoir que ce n'est pas une véritable URL, donc il va de l'avant et la charge. Cependant, si vous avez d'abord chargé la page racine et tout le code javascript, lorsque vous accédez à /aboutAngular, vous pouvez y accéder avant que le navigateur n'essaie de frapper le serveur et de le gérer en conséquence

James Sharp
la source
21
Quand il est écrit "vous devez réécrire tous vos liens vers le point d'entrée de votre application (par exemple index.html)", qu'est-ce que cela signifie? Est-ce que cela signifie que je dois entrer dans mon $routeProvideret changer les chemins de chacun, templateUrlpar exemple de templateUrl : '/views/about.html',à templateUrl : 'example.com/views/about.html',?
7
Non, vos règles dans $ routeProvider doivent rester telles quelles. La réponse se réfère à "côté serveur". Il s'agit de changer le routage sur le serveur qui fournit vos pages html angulaires. Avant que chaque demande ne parvienne à votre application angulaire, elle doit d'abord passer par le routage côté serveur, qui devrait réécrire toutes les demandes pour pointer vers le point d'entrée de votre application angulaire (par exemple, 'index.html' ou '/', selon la façon dont votre angulaire les routes fonctionnent).
marni
Dans le cas où je sers mon index.html minifié via un CDN, comment ce mécanisme de routage s'exécutera-t-il ??
CrazyGeek
1
oui - jetez un œil à stackoverflow.com/questions/22739455/…
James Sharp
5
Bon article pour apache, il y a un exemple htaccess: ngmilk.rocks/2015/03/09/…
Alcalyn
63

Il y a peu de choses à configurer, donc votre lien dans le navigateur ressemblera http://yourdomain.com/pathet ce sont votre configuration angulaire + côté serveur

1) AngularJS

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

2) côté serveur, placez-le .htaccessdans votre dossier racine et collez-le

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

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

Plus de choses intéressantes à lire sur le mode html5 dans angularjs et la configuration requise par environnement différent https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server -to-work-with-html5mode Cette question peut également vous aider à $ location / basculer entre html5 et le mode hashbang / réécriture de liens

lokers
la source
Salut. J'ai essayé la solution ci-dessus, apporté des modifications dans mon fichier de configuration. Mais ça ne marche toujours pas. L'actualisation de l'URL donne toujours l'erreur "404 NOT FOUND".
kTn
Comment rediriger / réécrire dans une application déployée dans Websphere?
Gary
Je ne vois pas pourquoi pas !
lokers
36

J'ai eu un problème similaire et je l'ai résolu en:

  • Utilisation <base href="https://stackoverflow.com/index.html">dans la page d'index

  • En utilisant un middleware catch all route dans mon nœud / serveur Express comme suit (mettez-le après le routeur):

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

Je pense que cela devrait vous permettre d'être opérationnel.

Si vous utilisez un serveur apache, vous souhaiterez peut-être mod_rewrite vos liens. Ce n'est pas difficile à faire. Juste quelques changements dans les fichiers de configuration.

Tout cela suppose que html5mode soit activé sur angularjs. Maintenant. notez que dans angular 1.2, déclarer une URL de base n'est plus recommandé en fait.

Taye
la source
1
Cette solution a fonctionné pour moi avec le réglage: <base href="https://stackoverflow.com/">et l'ajout du routage Express que vous avez suggéré. Merci beaucoup.
Gilad Peleg
Tahir Chad, aviez-vous encore besoin d'utiliser une réécriture d'URL côté serveur après avoir implémenté le <base href="https://stackoverflow.com/index.html">?
Cody
Oui, vous pouvez voir la réécriture d'URL comme un moyen de définir l'URL de base de votre application / site Web en pierre (domaine inclus). L'instruction html 'base url' est juste un moyen de s'assurer que tous les liens relatifs sont correctement dérivés de la même base. L'URL de base n'est pas absolument nécessaire si vos liens sont absolus.
Taye
1
Lorsque j'utilise ceci, je vois juste le code html lui-même sur la page, pas rendu comme une page réelle.
Noah
2
Cette réponse mérite des étoiles triples! Merci d'avoir fourni une réponse aussi simple. Tout le monde répète simplement la même ligne sur "la nécessité de rediriger le serveur".
Ahmed Haque
27

Solution pour BrowserSync et Gulp.

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

Première installation connect-history-api-fallback:

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

Ajoutez-le ensuite à votre gulpfile.js:

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

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: "app",
      middleware: [ historyApiFallback() ]
    }
  });
});
oscar
la source
Oh snap! Enfin le soulagement du développement de la vue angulaire! Et en prime, les URL standard (sans hash-bang) route aussi! Je vous remercie!
bits
1
Fonctionne comme un charme ... Merci beaucoup!
Nishanth Nair
1
Si vous utilisez un port spécifique (c.-à-d. Que le modèle vierge Ionic s'exécute sur le port 8100), ajoutez simplement une propriété supplémentaire après le serveur, c. server: { ... }, port: 8100-à- d. , Ajoutez simplement la servetâche à votre tâche de gulp par défaut (c.-à-d. gulp.task('default', ['sass', 'serve']);), Puis vous pouvez exécuter l'application sans les Cannot GET ...erreurs du navigateur lorsque vous actualisez la page en exécutant gulp. Notez que l'exécution du serveur avec ionic serverencontre toujours les erreurs.
Luke Schoen
Cela fonctionne bien lorsque j'utilise le navigateur de développement sync, dans prod j'exécute l'application en tant qu'application express et redirige tout le chemin vers l'application angulaire en tant qu'app.get ('*', fonction (req, res) {req.session.valid = true ; res.redirect ('/');}); La page ne se charge pas lorsque vous donnez le chemin directement?
Mr AJ
13

Vous devez configurer votre serveur pour tout réécrire dans index.html pour charger l'application:

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

subvention
la source
1
Parfait, le problème pour moi était d'utiliser Laravel Forge pour provisionner le serveur, qui avait la ligne nginx appropriée au try_files $uri $uri/ /index.php?...lieu du nécessaire index.html. Merci pour le lien!
CJ Thompson
Devrait être la meilleure réponse, donne toutes les situations, peu importe votre serveur. Fonctionne parfaitement avec NodeJS
Joe Lloyd
10

J'ai écrit un middleware de connexion simple pour simuler la réécriture d'URL sur des projets de grognement. https://gist.github.com/muratcorlu/5803655

Vous pouvez utiliser comme ça:

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
la source
Existe-t-il un moyen manuel de réécrire l'URL dans le $routeProvider?
1
Je ne reçois urlRewritepas d'avertissement défini lorsque j'essaie de l'exécuter, et j'ai du mal à trouver la bonne connexion avec la réécriture que je peux utiliser.
Me montre une erreur "La construction d'objet n'a pas de méthode 'initConfig' Utilisez --force pour continuer."
edonbajrami
8

Si vous êtes dans la pile .NET avec MVC avec AngularJS, voici ce que vous devez faire pour supprimer le '#' de l'URL:

  1. Configurez votre href de base dans votre page _Layout: <head> <base href="https://stackoverflow.com/"> </head>

  2. Ensuite, ajoutez ce qui suit dans la configuration de votre application angulaire: $locationProvider.html5Mode(true)

  3. Ci-dessus supprimera "#" de l'URL mais l'actualisation de la page ne fonctionnera pas. Par exemple, si vous êtes dans "yoursite.com/about", l'actualisation de la page vous donnera un 404. Ceci est dû au fait que MVC ne connaît pas le routage angulaire et par modèle MVC il recherchera une page MVC pour «à propos» qui n'existe pas dans le chemin de routage MVC. La solution consiste à envoyer toutes les demandes de page MVC à une seule vue MVC et vous pouvez le faire en ajoutant une route qui capture toutes les URL


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

Règle de réécriture d'URL IIS pour éviter l'erreur 404 après l'actualisation de la page en html5mode

Pour un fonctionnement angulaire sous IIS sous 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>

Routes NodeJS / ExpressJS pour éviter l'erreur 404 après l'actualisation de la page en html5mode

Pour un fonctionnement angulaire sous 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;

Plus d'informations sur: AngularJS - Activer l'actualisation de la page en mode HTML5 sans erreurs 404 dans NodeJS et IIS

Jason
la source
Merci, les règles IIS m'ont aidé avec une application angular2 déployée en azur qui ne dirigeait pas vers une route enfant.
bitsprint
Je ne vous remercierai jamais assez pour la solution pour IIS (localhost dans VS 2013). Frappé ma tête assez longtemps dans la frustration, a finalement trouvé cette réponse. A fonctionné comme un charme.
Florida G.
5

Comme d'autres l'ont mentionné, vous devez réécrire les itinéraires sur le serveur et les définir <base href="https://stackoverflow.com/"/>.

Pour 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
la source
4

J'utilise apache (xampp) sur mon environnement de développement et apache sur la production, ajoutez:

errorDocument 404 /index.html

au .htaccess résoudre pour moi ce problème.

crlshn
la source
4

Pour Grunt et Browsersync, utilisez connect-modrewrite ici

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
la source
il y a 15 au-dessus de cette réponse qui étaient un laps de temps. 1. npm install connect-modrewrite --save2. require in gruntfile3. copiez le serveur obj ci-dessus
Omar
Merci, cela a fonctionné pour moi dans gulp 4 avec la configuration de browserSync.
Abdeali Chandanwala
Heureux que cela ait aidé @Abdeali Chandanwala!
MrThunder
@Omar Je suis en désaccord avec vous, les utilisateurs moins avancés comme moi bénéficient de voir comment l'ajouter au gulpfile. Il est préférable de se rappeler que les gens ont différents niveaux de connaissances et que l'écriture dans gruntfile ne serait pas utile car je suppose qu'ils comprennent comment l'ajouter à gulp.
MrThunder
3

J'ai résolu de

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
la source
3

Je réponds à cette question à partir de la question plus large:

Lorsque j'ajoute $ locationProvider.html5Mode (true), mon site ne permet pas de coller des URL. Comment configurer mon serveur pour qu'il fonctionne lorsque html5Mode est vrai?

Lorsque vous avez activé html5Mode, le caractère # ne sera plus utilisé dans vos URL. Le symbole # est utile car il ne nécessite aucune configuration côté serveur. Sans #, l'url semble beaucoup plus agréable, mais elle nécessite également des réécritures côté serveur. Voici quelques exemples:

Pour Express Rewrites avec AngularJS, vous pouvez résoudre ce problème avec les mises à jour suivantes:

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

et

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

et

app.use('/',express.static(__dirname + '/public'));
Ironheartbj18
la source
Merci c'est la solution. Pour Nodejs, ajoutez app.js à app.use ('/ *', index);
Tigin
2

Je crois que votre problème concerne le serveur. La documentation angulaire concernant le mode HTML5 (au lien dans votre question) indique:

Côté serveur L'utilisation de ce mode nécessite une réécriture d'URL côté serveur, fondamentalement vous devez réécrire tous vos liens vers le point d'entrée de votre application (par exemple index.html)

Je pense que vous devrez configurer une réécriture d'URL de / à propos de /.

lucuma
la source
Merci pour votre réponse. Ainsi, lorsque je suis sur la page À propos et que je rafraîchis, le serveur doit réécrire l'URL dans /? Le problème est que je travaille avec un backend de rails qui se trouve sur un domaine différent. Toutes les communications se font par appels API. Comment pourrais-je réécrire ces URL?
Dieter De Mesmaeker
Le fait est que votre application est disponible sur la route de votre serveur de / donc lorsque vous actualisez une URL qui est / à propos du navigateur demandera à votre serveur quelle que soit la page à / à propos (dans ce cas, vous n'avez aucune page là-bas, vous devez donc rediriger ceux de retour).
lucuma
2

Nous avons eu une redirection de serveur dans Express:

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

et nous rencontrions toujours des problèmes d'actualisation de page, même après avoir ajouté le <base href="https://stackoverflow.com/" />.

Solution: assurez-vous que vous utilisez de vrais liens dans votre page pour naviguer; ne saisissez pas l'itinéraire dans l'URL ou vous obtiendrez une actualisation de la page. (erreur stupide, je sais)

:-P

Cody
la source
mais en raison de chaque demande http aura un fichier d'index, comme par exemple: / getJsonFromServer - une demande http qui renvoie des données mais en raison de cette configuration, il retournera également la page d'index
vijay
1

Enfin, j'ai eu un moyen de résoudre ce problème côté serveur car il ressemble plus à un problème avec AngularJs lui-même J'utilise 1.5 Angularjs et j'ai eu le même problème lors du rechargement de la page. Mais après avoir ajouté le code ci-dessous dans mon server.jsfichier, c'est sauver ma journée, mais ce n'est pas une bonne solution ou pas un bon moyen.

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

J'ai trouvé un plugin Grunt encore meilleur, qui fonctionne si vous avez votre index.html et Gruntfile.js dans le même répertoire;

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

Après cela dans votre 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
la source
Le module grunt-connect-pushstate est obsolète
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
la source
0

J'ai eu le même problème avec java + angular app généré avec JHipster . Je l'ai résolu avec Filter et la liste de toutes les pages angulaires dans les propriétés:

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

J'espère que ce sera utile pour quelqu'un.

Igor Zboichik
la source
0

Navigateur Gulp + Sync:

Installez connect-history-api-fallback via npm, puis configurez votre tâche serve gulp

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

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

Votre code côté serveur est JAVA, puis suivez les étapes ci-dessous

étape 1: Télécharger le fichier JAR urlrewritefilter Cliquez ici et enregistrez-le pour créer le chemin WEB-INF / lib

étape 2: Activer le mode HTML5 $ locationProvider.html5Mode (true);

étape 3: définir l'URL de base <base href="https://stackoverflow.com/example.com/"/>

étape 4: copier et coller sur votre 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>

étape 5: créer un fichier dans 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
la source
Comment ajouter une règle pour une URL dynamique comme - test.com/user/101 test.com/user/102
Krishna Kumar Chourasiya
0

J'ai cette solution simple que j'utilise et ses travaux.

Dans App / Exceptions / Handler.php

Ajoutez ceci en haut:

use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

Puis à l'intérieur de la méthode de rendu

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
la source
0

J'ai résolu le problème en ajoutant l'extrait de code ci-dessous dans le fichier node.js.

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

Remarque: lorsque nous actualisons la page, il recherchera l'API au lieu de la page angulaire (en raison de l'absence de balise # dans l'URL.). En utilisant le code ci-dessus, je redirige vers l'URL avec #

Ram Gollapalli
la source
-2

Écrivez simplement une règle dans 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>

Dans l'index ajoutez ceci

<base href="/">

cela fonctionne pour moi, vous avez peut-être oublié de définir Html5Mode app.config

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