Le routeur angulaire 2.0 ne fonctionne pas pour recharger le navigateur
J'utilise la version angulaire 2.0.0-alpha.30. Lorsque vous redirigez vers un autre itinéraire, actualisez le navigateur. L'affichage Cannot GET/route s'affiche.
Pouvez-vous m'aider à comprendre pourquoi cette erreur s'est produite.
L'erreur que vous voyez est due au fait que vous demandez http: // localhost/route qui n'existe pas. Selon Simon .
Lorsque vous utilisez le routage html5, vous devez mapper tous les itinéraires de votre application (actuellement 404) vers index.html côté serveur. Voici quelques options pour vous:
utiliser live-server: https://www.npmjs.com/package/live-server
$live-server --entry-file=index.htmlusing nginx: http://nginx.org/en/docs/beginners_guide.html
error_page 404 /index.htmlTomcat - configuration de web.xml. Du commentaire de Kunin
<error-page> <error-code>404</error-code> <location>/index.html</location> </error-page>
Avertissement: ce correctif fonctionne avec Alpha44
J'avais le même problème et je l'ai résolu en implémentant le HashLocationStrategy répertorié dans l'aperçu de l'API Angular.io.
https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html
Commencez par importer les directives nécessaires
import {provide} from 'angular2/angular2';
import {
ROUTER_PROVIDERS,
LocationStrategy,
HashLocationStrategy
} from 'angular2/router';
Et enfin, bootstrap le tout ensemble comme si
bootstrap(AppCmp, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})
]);
Votre itinéraire apparaîtra sous la forme http: // localhost/#/route et, lorsque vous actualiserez, il rechargera à son emplacement approprié.
J'espère que cela pourra aider!
Angular utilise par défaut HTML5 pushstate (PathLocationStrategy en argot angulaire).
Vous avez besoin d’un serveur qui traite toutes les requêtes de la même manière que index.html ou vous passez à HashLocationStrategy (avec # dans l’URL des routes) https://angular.io/docs/ts/latest/api/common /index/HashLocationStrategy-class.html
Voir aussi https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-Apache-using-htaccess/
Pour passer à HashLocationStrategy, utilisez
update pour> = RC.5 et 2.0.0 final
import {HashLocationStrategy, LocationStrategy} from '@angular/common';
@NgModule({
declarations: [AppCmp],
bootstrap: [AppCmp],
imports: [BrowserModule, routes],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
]);
ou plus court avec useHash
imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true}), ...
s'assurer que vous avez toutes les importations requises
Pour le nouveau routeur (RC.3)
<base href=".">
peut causer 404 aussi bien.
Il nécessite à la place
<base href="/">
update pour> = RC.x
bootstrap(AppCmp, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})
// or since RC.2
{provide: LocationStrategy, useClass: HashLocationStrategy}
]);
import {provide} from '@angular/core';
import {
PlatformLocation,
Location,
LocationStrategy,
HashLocationStrategy,
PathLocationStrategy,
APP_BASE_HREF}
from '@angular/common';
update for> = beta.16 Les importations ont changé
import {BrowserPlatformLocation} from '@angular/platform-browser';
import {provide} from 'angular2/core';
import {
// PlatformLocation,
// Location,
LocationStrategy,
HashLocationStrategy,
// PathLocationStrategy,
APP_BASE_HREF}
from 'angular2/router';
import {BrowserPlatformLocation} from 'angular2/src/router/location/browser_platform_location';
<beta.16
import {provide} from 'angular2/core';
import {
HashLocationStrategy
LocationStrategy,
ROUTER_PROVIDERS,
} from 'angular2/router';
Voir aussi https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26 break-changes
Je pense que l'erreur que vous voyez est parce que vous demandez http: // localhost/route qui n'existe pas. Vous devez vous assurer que votre serveur mappera toutes les demandes sur votre page index.html principale.
Comme Angular 2 utilise le routage html5 par défaut plutôt que d'utiliser des hachages à la fin de l'URL, l'actualisation de la page ressemble à une demande pour une ressource différente.
Il s'agit d'une situation courante dans toutes les versions de routeur si vous utilisez la stratégie d'emplacement HTML par défaut.
En réalité, l’URL de la barre de navigation est une URL HTML normale, comme par exemple: http://localhost/route.
Ainsi, lorsque nous appuyons sur Entrée dans la barre de navigation, une demande HTTP est envoyée au serveur pour obtenir un fichier nommé route.
Le serveur ne possède pas ce fichier et aucun élément tel que express n'est configuré sur le serveur pour gérer la demande et fournir une réponse. Le serveur retourne donc 404 Introuvable, car il n'a pas trouvé le fichier route.
Ce que nous souhaitons, c'est que le serveur retourne le fichier index.html contenant l'application à page unique. Ensuite, le routeur doit démarrer et traiter l'URL /route et afficher le composant qui y est mappé.
Donc, pour résoudre le problème, nous devons configurer le serveur afin qu'il renvoie index.html (en supposant qu'il s'agisse du nom de votre fichier d'application d'une page) au cas où la demande ne pourrait pas être traitée, par opposition à 404 Introuvable.
La manière de procéder dépend de la technologie côté serveur utilisée. Si vous utilisez Java par exemple, vous devrez peut-être écrire une servlet. Dans Rails, ce sera différent, etc.
Pour donner un exemple concret, si vous utilisez par exemple NodeJs, vous devez écrire un middleware comme celui-ci:
function sendSpaFileIfUnmatched(req,res) {
res.sendFile("index.html", { root: '.' });
}
Et puis enregistrez-le à la fin de la chaîne de middleware:
app.use(sendSpaFileIfUnmatched);
Cela servira index.html au lieu de renvoyer un 404, le routeur se mettra en marche et tout fonctionnera comme prévu.
Assurez-vous qu'il est placé dans l'élément head de votre index.html:
<base href="/">
Le Exemple dans Angular2 - Routing & Navigation documentation utilise à la place le code suivant dans la tête (ils expliquent pourquoi dans la note d'exemple en direct de la documentation):
<script>document.write('<base href="' + document.location + '" />');</script>
Lorsque vous actualisez une page, cela définit dynamiquement la base href sur votre document actuel. Je pouvais voir que cela causait une certaine confusion aux personnes parcourant la documentation et essayant de reproduire le disque.
J'ai eu le même problème avec l'utilisation de webpack-dev-server. Je devais ajouter l'option devServer à mon pack Web.
Solution:
// in webpack
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
Si vous voulez pouvoir entrer des URL dans le navigateur sans configurer votre AppServer pour gérer toutes les demandes adressées à index.html, vous devez utiliser HashLocationStrategy .
Le moyen le plus simple de configurer est d'utiliser:
RouterModule.forRoot(routes, { useHash: true })
Au lieu de:
RouterModule.forRoot(routes)
Avec HashLocationStrategy vos urls vont ressembler à:
http://server:port/#/path
Si vous utilisez Apache ou Nginx en tant que serveur, vous devez créer un .htaccess (s'il n'a pas été créé auparavant) et "On" RewriteEngine
RewriteEngine On
RewriteCond% {DOCUMENT_ROOT}% {REQUEST_URI} -f [OU]
RewriteCond% {DOCUMENT_ROOT}% {REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html
Mon serveur est Apache. Ce que j'ai fait pour résoudre 404 lorsque l'actualisation ou la liaison en profondeur est très simple. Ajoutez simplement une ligne dans Apache vhost config:
ErrorDocument 404 /index.html
Ainsi, toute erreur 404 sera redirigée vers index.html, ce que veut le routage angular2.
L'exemple de fichier vhost complet:
<VirtualHost *:80>
ServerName fenz.niwa.local
DirectoryIndex index.html
ErrorDocument 404 /index.html
DocumentRoot "/Users/zhoum/Documents/workspace/fire/fire_service/dist"
ErrorLog /Users/zhoum/Documents/workspace/fire/fire_service/logs/fenz.error.log
CustomLog /Users/zhoum/Documents/workspace/fire/fire_service/logs/fenz.access.log combined
<Directory "/Users/zhoum/Documents/workspace/fire/fire_service/dist">
AllowOverride All
Options Indexes FollowSymLinks
#Order allow,deny
#Allow from All
Require all granted
</Directory>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST"
Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Allow-Headers "Accept-Encoding"
</VirtualHost>
Peu importe le serveur que vous utilisez, je pense que le but principal est de trouver les moyens de configurer le serveur pour rediriger 404 vers votre index.html.
La configuration du serveur n'est pas une solution pour un SPA, c'est ce que je pense même. Vous ne voulez pas recharger à nouveau un SPA angulaire si un mauvais itinéraire entre, n'est-ce pas? Je ne vais donc pas dépendre d'un itinéraire de serveur et rediriger vers un autre itinéraire, mais oui, je laisserai index.html gérer toutes les demandes d'itinéraires angulaires du chemin d'application angulaire.
Essayez ceci au lieu d’autres itinéraires ou de mauvais itinéraires. Cela fonctionne pour moi, pas sûr mais semble être un travail en cours. J'ai trébuché moi-même face à un problème.
@RouteConfig([
{ path: '/**', redirectTo: ['MycmpnameCmp'] },
...
}
])
https://github.com/angular/angular/issues/4055
Cependant, n'oubliez pas de configurer vos dossiers de serveur et les droits d'accès au cas où vous auriez des scripts HTML ou Web autres que SPA. Sinon, vous ferez face à des problèmes. Pour moi, face à un problème comme vous, il s’agissait d’un mélange de configuration de serveur et de systèmes supérieurs.
you can use this solution for mean application
i used ejs as view engine
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
&&
app.use(function (req, res, next) {
return res.render('index.html');
});
and also set in angular- cli .json
"apps": [
{
"root": "src",
"outDir": "views",
it will work fine instead of
app.get('*', function (req, res, next) {
res.sendFile('dist/index.html', { root: __dirname });
});
its creating issue with get db calls and returning index.html
pour la solution rapide angulaire 5, éditez app.module.ts et ajoutez {useHash:true} après appRoutes.
@NgModule(
{
imports:[RouterModule.forRoot(appRoutes,{useHash:true})]
})
Pour ceux d'entre nous qui luttons à travers la vie dans IIS: utilisez le code PowerShell suivant pour résoudre ce problème en vous basant sur la documentation Angular 2 officielle (celle qu'une personne a publiée dans ce fil? http://blog.angular-university.io/angular2- routeur/ )
Import-WebAdministration
# Grab the 404 handler and update it to redirect to index.html.
$redirect = Get-WebConfiguration -filter "/system.WebServer/httperrors/error[@statusCode='404']" -PSPath IIS:\Sites\LIS
$redirect.path = "/index.html"
$redirect.responseMode = 1
# shove the updated config back into IIS
Set-WebConfiguration -filter "/system.WebServer/httperrors/error[@statusCode='404']" -PSPath IIS:\Sites\LIS -value $redirect
Ceci redirige le 404 vers le fichier /index.html selon la suggestion de la documentation Angular 2 (lien ci-dessus).
Vous pouvez essayer ci-dessous. Ça marche pour moi!
main.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
...
export class MainComponent implements OnInit {
constructor(private router: Router) {
let path: string = window.location.hash;
if (path && path.length > 0) {
this.router.navigate([path.substr(2)]);
}
}
public ngOnInit() { }
}
Vous pouvez encore améliorer path.substr (2) pour le scinder en paramètres de routeur. J'utilise 2.4.9 angulaire
Je souhaitais conserver le chemin des URL des sous-pages en mode HTML5 sans redirection vers index et aucune des solutions proposées ne m'indiquant comment procéder, voici comment je l'ai accompli:
Créez des répertoires virtuels simples dans IIS pour tous vos itinéraires et pointez-les vers la racine de l'application.
Enveloppez votre server.webServer dans votre Web.config.xml avec cette balise d’emplacement, sinon vous obtiendrez des erreurs de doublon en chargeant Web.config une seconde fois avec le répertoire virtuel:
<configuration>
<location path="." inheritInChildApplications="false">
<system.webServer>
<defaultDocument enabled="true">
<files>
<add value="index.html" />
</files>
</defaultDocument>
</system.webServer>
</location>
</configuration>
Je pense que vous obtenez 404 parce que vous demandez http: // localhost/route qui n’existe pas sur le serveur Tomcat. Comme Angular 2 utilise le routage html 5 par défaut plutôt que d'utiliser des hachages à la fin de l'URL, l'actualisation de la page ressemble à une demande pour une ressource différente.
Lorsque vous utilisez le routage angulaire sur Tomcat, vous devez vous assurer que votre serveur mappera tous les itinéraires de votre application sur votre index.html principal lors de l'actualisation de la page. Il existe plusieurs façons de résoudre ce problème. Quel que soit le choix qui vous convient, vous pouvez y aller.
1) Placez le code ci-dessous dans le fichier web.xml de votre dossier de déploiement:
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
2) Vous pouvez également essayer d'utiliser HashLocationStrategy avec # dans l'URL pour les itinéraires:
Essayez d'utiliser:
RouterModule.forRoot (routes, {useHash: true})
Au lieu de:
RouterModule.forRoot (routes)
Avec HashLocationStrategy, vos URLs seront comme:
3) Valve de réécriture d'URL Tomcat: réécrivez l'URL à l'aide d'une configuration au niveau du serveur pour la rediriger vers index.html si la ressource est introuvable.
3.1) Dans le dossier META-INF, créez un fichier context.xml et copiez le contexte ci-dessous.
<? xml version='1.0' encoding='utf-8'?>
<Context>
<Valve className="org.Apache.catalina.valves.rewrite.RewriteValve" />
</Context>
3.2) Dans WEB-INF, créez le fichier rewrite.config (ce fichier contient la règle de réécriture d'URL et est utilisé par Tomcat pour la réécriture d'URL). Dans rewrite.config, copiez le contenu ci-dessous:
RewriteCond %{SERVLET_PATH} !-f
RewriteRule ^/(.*)$ /index.html [L]
Les applications angulaires sont des candidats parfaits pour servir avec un simple serveur HTML statique. Vous n'avez pas besoin d'un moteur côté serveur pour composer dynamiquement des pages d'application, car Angular le fait côté client.
Si l'application utilise le routeur angulaire, vous devez configurer le serveur pour qu'il renvoie la page hôte de l'application (index.html) lorsqu'il vous est demandé de fournir un fichier qu'il n'a pas.
Une application routée doit prendre en charge les "liens profonds". Un lien profond est une URL qui spécifie un chemin d'accès à un composant dans l'application. Par exemple, http://www.example.com/heroes/42 est un lien profond vers la page de détail du héros qui affiche le héros avec l'id: 42.
Il n'y a aucun problème lorsque l'utilisateur accède à cette URL à partir d'un client en cours d'exécution. Le routeur angulaire interprète l'URL et les itinéraires vers cette page et ce héros.
Mais en cliquant sur un lien dans un courrier électronique, en le saisissant dans la barre d'adresse du navigateur ou en rafraîchissant simplement le navigateur sur la page de détail du héros, toutes ces actions sont gérées par le navigateur lui-même, en dehors de l'application en cours d'exécution. Le navigateur envoie une demande directe au serveur pour cette URL, en contournant le routeur.
Un serveur statique renvoie régulièrement index.html lorsqu'il reçoit une demande pour http://www.example.com/ . Mais il rejette http://www.example.com/heroes/42 et renvoie une erreur 404 - Not Found à moins qu'il ne soit configuré pour renvoyer index.html.
Si ce problème est survenu en production, suivez les étapes ci-dessous
1) Ajoutez un fichier Web.Config dans le dossier src de votre application angular. Placez le code ci-dessous.
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes" 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>
</system.webServer>
</configuration>
2) Ajoutez une référence à celui-ci dans angular-cli.json. Dans angular-cli.json, mettez Web.config dans le bloc d’actifs, comme indiqué ci-dessous.
"assets": [
"assets",
"favicon.ico",
"Web.config"
],
3) Vous pouvez maintenant construire la solution pour la production en utilisant
ng build --prod
Cela va créer un dossier dist. Les fichiers du dossier dist sont prêts à être déployés par n’importe quel mode.
J'ai vérifié dans 2 graines angulaires comment cela fonctionne.
Vous pouvez utiliser express-history-api-fallback pour rediriger automatiquement les pages lorsqu'une page est rechargée.
Je pense que c'est la manière la plus élégante de résoudre ce problème, OMI.
Si vous souhaitez utiliser PathLocationStrategy:
- Configuration Wildfly:
- Créer le fichier Undeadow-handlers.conf à placer dans le fichier WEB-INF
- Contenu: (excluez vos points de terminaison restants!)
- regex ['(./ overview/?.? $)'] et non pas regex ['(./ points de terminaison.)'] -> réécrire ['/ index.html']
- regex ['(./ deployments/?.? $)'] et non pas regex ['(./ points finaux.)'] -> réécrire ['/ index.html']
Application simple page avec Java EE/Wildfly: configuration côté serveur
je viens d'ajouter. Htaccess dans la racine.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ ./index.html
</IfModule>
ici, je viens d’ajouter un point '.' (répertoire parent) dans /index.html à ./index.html
assurez-vous que votre fichier index.html dans le chemin de base est le chemin du répertoire principal et défini dans la construction du projet.
Si vous utilisez Apache ou Nginx en tant que serveur, vous devez créer un fichier .htaccess.
<IfModule mime_module>
AddHandler application/x-httpd-ea-php72 .php .php7 .phtml
</IfModule>
# php -- END cPanel-generated handler, do not edit
<IfModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html
# to allow html5 state links
RewriteRule ^ index.html [L]
</IfModule>
La réponse est assez délicate. Si vous utilisez un serveur Apache totalement ancien (ou IIS), vous obtenez le problème, car les pages angulaires n'existent pas réellement. Ils sont "calculés" à partir de la route angulaire.
Il existe plusieurs façons de résoudre le problème. L'une consiste à utiliser le HashLocationStrategy proposé par Angular. Mais un signe pointu est ajouté dans l'URL. Ceci est principalement pour la compatibilité avec Angular 1 (je suppose). Le fait est que la partie après le dièse ne fait pas partie de l'URL (le serveur résout ensuite la partie avant le signe "#"). Cela peut être parfait.
Voici une méthode améliorée (basée sur l'astuce 404). Je suppose que vous avez une version "distribuée" de votre application angulaire (ng build --prod si vous utilisez Angular-CLI) et que vous accédez aux pages directement avec votre serveur et que PHP est activé.
Si votre site Web est basé sur des pages (Wordpress par exemple) et que vous ne possédez qu'un seul dossier dédié à Angular (nommé "dist" dans mon exemple), vous pouvez faire quelque chose de bizarre, mais simple à la fin. Je suppose que vous avez stocké vos pages angulaires dans "/ dist" (avec le code correspondant <BASE HREF="/dist/">). Maintenant, utilisez une redirection 404 et l'aide de PHP.
Dans votre configuration Apache (ou dans le fichier .htaccess du répertoire de votre application angular), vous devez ajouter ErrorDocument 404 /404.php.
Le 404.php commencera par le code suivant:
<?php
$angular='/dist/';
if( substr($_SERVER['REQUEST_URI'], 0, strlen($angular)) == $angular ){
$index = $_SERVER['DOCUMENT_ROOT'] . $angular . "index.html";
http_response_code(200);
include $index;
die;
}
// NOT ANGULAR...
echo "<h1>Not found.</h1>"
où $angular est la valeur stockée dans le HREF de votre angulaire index.html.
Le principe est assez simple, si Apache ne trouve pas la page, une redirection 404 est faite vers le script PHP. Nous vérifions simplement si la page se trouve dans le répertoire d'application angulaire. Si c'est le cas, il suffit de charger le fichier index.html directement (sans redirection): il est nécessaire de conserver l'URL inchangée. Nous modifions également le code HTTP de 404 à 200 (juste mieux pour les robots d'exploration).
Que se passe-t-il si la page n'existe pas dans l'application angulaire? Eh bien, nous utilisons le "catch all" du routeur angulaire (voir Documentation du routeur angulaire).
Cette méthode fonctionne avec une application Angular intégrée dans un site Web de base (je pense que ce sera le cas à l'avenir).
REMARQUES:
- Essayer de faire la même chose avec
mod_redirect(en réécrivant les URL) n’est pas du tout une bonne solution car les fichiers (comme les actifs) doivent être réellement chargés, c’est beaucoup plus risqué que de simplement utiliser la solution "introuvable". - Juste rediriger en utilisant
ErrorDocument 404 /dist/index.htmlfonctionne mais Apache répond toujours avec un code d'erreur 404 (ce qui est mauvais pour les robots d'exploration).
J'ai résolu ce problème (à l'aide de Java/Spring) en ajoutant un gestionnaire qui correspond à tout ce qui est défini dans mes routes angulaires, qui renvoie index.html au lieu de 404. Cela permet ensuite de (re) démarrer l'application et charger la page correcte. J'ai aussi un gestionnaire 404 pour tout ce qui n'est pas pris au piège.
@Controller ////don't use RestController or it will just send back the string "index.html"
public class Redirect {
private static final Logger logger = LoggerFactory.getLogger(Redirect.class);
@RequestMapping(value = {"comma", "sep", "list", "of", "routes"})
public String redirectToIndex(HttpServletRequest request) {
logger.warn("Redirect api called for URL {}. Sending index.html back instead. This will happen on a page refresh or reload when the page is on an Angular route", request.getRequestURL());
return "/index.html";
}
}
Ajouter des importations:
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
Et dans le fournisseur NgModule, ajoutez:
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
Dans l'index principal.html, le fichier de l'application change le href de base en ./index.html de /
Lorsque l'application est déployée sur n'importe quel serveur, elle donne une véritable URL pour la page, accessible à partir de toute application externe.
Si vous utilisez le serveur Web nginx pour servir votre application angulaire, il vous suffit d'ajouter try_files $uri $uri/ /index.html; dans le bloc serveur du fichier de configuration nginx. En cas de serveur Ubuntu, ce fichier s'appelle default.conf et peut être trouvé à /etc/nginx/conf.d
/etc/nginx/conf.d # vi default.conf
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log /var/log/nginx/Host.access.log main;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
}
2017-juillet-11: Comme c'est lié d'une question ayant ce problème mais en utilisant Angular 2 avec Electron, je vais ajouter ma solution ici.
Tout ce que je devais faire était de supprimer <base href="./"> de mon index.html et Electron a commencé à recharger à nouveau la page.
Ceci n'est pas un correctif permanent pour le problème mais plutôt comme une solution de contournement ou un hack
J'ai eu ce même problème lors du déploiement de mon application angulaire sur gh-pages . D'abord, j'ai été accueilli avec 404 messages lors de l'actualisation de mes pages sur gh-pages.
Ensuite, comme ce que @gunter a souligné, j’ai commencé à utiliser HashLocationStrategy qui était fourni avec Angular 2.
Mais cela est venu avec son propre ensemble de problèmes, le # dans l'URL, il était vraiment mauvais, l'url a l'air étrange comme ceci https://rahulrsingh09.github.io/AngularConcepts/#/faq.
J'ai commencé des recherches sur ce problème et suis tombé sur un blog. J'ai essayé de tenter le coup et cela a fonctionné.
Voici ce que j'ai fait comme mentionné dans ce blog.
Vous devez commencer par ajouter un fichier 404.html à votre dépôt gh-pages qui contient un document HTML vide - mais votre document doit totaliser plus de 512 octets (expliqué ci-dessous). Ensuite, mettez le balisage suivant dans l'élément principal de votre page 404.html:
<script>
sessionStorage.redirect = location.href;
</script>
<meta http-equiv="refresh" content="0;URL='/REPO_NAME_HERE'"></meta>
Ce code définit l'URL de tentative d'entrée sur une variable du fichier objet sessionStorage standard et redirige immédiatement vers votre fichier page index.html du projet à l’aide d’une balise meta refresh. Si vous faites un Github Organization, ne mettez pas de nom de dépôt dans le contenu attribuez le texte de remplacement, faites juste ceci: content = "0; URL = '/'"
Afin de capturer et de restaurer l'URL, l'utilisateur a initialement navigué vous devez ajouter la balise de script suivante à l’en-tête de votre index.html page avant tout autre JavaScript agit sur le .__ actuel de la page. Etat:
<script>
(function(){
var redirect = sessionStorage.redirect;
delete sessionStorage.redirect;
if (redirect && redirect != location.href) {
history.replaceState(null, null, redirect);
}
})();
</script>
Ce bit de JavaScript récupère l'URL que nous avons mise en cache dans sessionStorage sur la page 404.html et remplace l’entrée d’historique actuelle par il.
Référence backalleycoder Merci à @Daniel pour cette solution de contournement.
Maintenant, l'URL ci-dessus devient https://rahulrsingh09.github.io/AngularConcepts/faq
Il suffit d’ajouter .htaccess dans la racine résolue 404 tout en rafraîchissant la page angulaire 4 Apache2.
<IfModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html
# to allow html5 state links
RewriteRule ^ index.html [L]
</IfModule>
La meilleure solution pour résoudre le problème du "routeur ne fonctionnant pas lors du rechargement du navigateur" est que nous devrions utiliser spa-back. Si vous utilisez une application angular2 avec asp.net core, vous devez le définir sur la page "StartUp.cs". sous routages MVC. Je joins le code.
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index" });
});
Ce n'est pas la bonne réponse, mais lors de l'actualisation, vous pouvez rediriger tous les appels morts vers la page d'accueil en sacrifiant la page 404.
<!doctype html>
<html>
<head>
<script type="text/javascript">
window.location.href = "http://" + document.location.Host;
</script>
</head>
</html>